UI kit components

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:

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

An inline component that displays a link.

Usage

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

Props

NameTypeRequiredDescription
hrefstringYes

The prop href behaves like an HTML href. You should include http(s):// for full URLs. Relative paths, such as /wiki, are also supported.

appearancestringThe appearance of the link. Valid values are link, button, and primary-button. Defaults to link.
openNewTabbooleanWhether or not the link should open in a new tab. Defaults to false.

Example

A text component with a nested link that displays as a button.

1
2
3
4
5
<Text>
  <Link appearance="button" href="https://atlassian.com">
    Go to Atlassian
  </Link>
</Text>

Preview

Screenshot of the rendered link

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: