Forge Developer

Forge Developer

Rate this page:

Text

Deprecation notice

Markdown syntax is deprecated and will no longer be supported removed by 23 March 2021. On this date, apps that use @forge/ui@0.9.0 or later must use markup components. Apps that use earlier versions of @forge/ui must use markup components as well.

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
<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: