Rate this page:

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:

NameMarkupOutput
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

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

Props

NameTypeRequiredDescription
childrenstring | ForgeInlineComponentYesThe text and inline components to display.

Example

A text component displaying markup content.

1
2
3
4
5
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

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

Props

NameTypeRequiredDescription
textstringYesThe text within the badge.
appearancestringThe 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.

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

Preview

Screenshot of the rendered badge components

DateLozenge

An inline component that displays a calendar date.

Usage

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

Props

NameTypeRequiredDescription
valuenumberYesThe 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

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

Props

NameTypeRequiredDescription
textstringYesThe text content of the status lozenge.
appearancestringThe 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

Rate this page: