Text

Deprecation notice

Markdown syntax has been deprecated and removed on 23 March 2021 in the @forge/ui@0.9.0 release. Apps that use @forge/ui must use markup components.

This component displays plain text (with some options for basic text formatting) and inline components.

Inline components are special components that can be used within a Text component to display inline content, for example, Badge, DateLozenge, and StatusLozenge.

Supported text formatting options:

Name	Markup	Output
code	`<Code text="code" />`	`code`
em	`<Em>em</Em>`	em
link	`<Link href="https://www.atlassian.com" />` `<Link href="https://www.atlassian.com">Atlassian</Link>` `href` behaves like an HTML `href`, you should include `http(s)://` for full URLs — relative paths such as `/wiki` are also supported	www.atlassian.com Atlassian
strike	`<Strike>strike</Strike>`	~~strike~~
strong	`<Strong>strong</Strong>`	strong

Usage

import ForgeUI, { Text } from '@forge/ui';

Props

Name	Type	Required	Description
`children`	`string \| ForgeInlineComponent`	Yes	The text and inline components to display.

Example

A text component displaying markup content.

import ForgeUI, { Text, Strong } from '@forge/ui';

<Text>
 Some <Strong>bold text</Strong>
</Text>

Preview

Screenshot of what the rendered text should look like

Badge

Badges are inline components used as visual indicators for numeric values, such as notifications and scores.

Usage

import ForgeUI, { Badge } from '@forge/ui';

Props

Name	Type	Required	Description
`text`	`string`	Yes	The text within the badge.
`appearance`	`string`		The appearance of the badge. Valid values are `added`, `default`, `important`, `primary`, and `removed`. Defaults to `default`.

Example

A badge with a source-lines-of-code diff count.

<Text>
  <Badge appearance='removed' text="-10" />
  <Badge appearance='added' text="+27" />
  <Badge appearance='primary' text="5K" />
</Text>

Preview

DateLozenge

An inline component that displays a calendar date.

Usage

import ForgeUI, { DateLozenge } from '@forge/ui';

Props

Name	Type	Required	Description
`value`	`number`	Yes	The date represented as the number of milliseconds elapsed since Unix epoch.

Example

A text component with a nested DateLozenge component.

1
2
3

<Text>
 <DateLozenge value={new Date('07-29-1988').getTime()} />
</Text>

Preview

Screenshot of the rendered date

StatusLozenge

An inline component that displays a status lozenge.

Usage

import ForgeUI, { StatusLozenge } from '@forge/ui';

Props

Name	Type	Required	Description
`text`	`string`	Yes	The text content of the status lozenge.
`appearance`	`string`		The appearance of the status lozenge. Valid values are `default`, `inprogress`, `moved`, `new`, `removed`, and `success`. Defaults to `default`.

Example

A text component with text content and a nested StatusLozenge component.

1
2
3

<Text>
  You have 4 tickets: <StatusLozenge text="In progress" appearance="inprogress" />
</Text>

Preview

Screenshot of the rendered status lozenge