Common UI kit components
Confluence UI kit components
Jira UI kit components

Rate this page:

Text

A piece of plain text with basic text formatting options.

It can also include inline components such as Badge, DateLozenge, and StatusLozenge.

Screenshot of what the rendered text should look like

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.

Usage notes

The text formatting options are listed here.

Import statement

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

Props

NameTypeRequiredDescription
childrenstring | ForgeInlineComponentYesThe text and inline components to display.

Example

1
2
3
4
5
import ForgeUI, { Text, Strong } from '@forge/ui';

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

Badge

An inline visual indicator of a numeric value like a score or number of notifications.

Image of badges

Import statement

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>

An inline component that displays a link.

Screenshot of the rendered link

Import statement

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>

DateLozenge

An inline component that displays a calendar date.

Screenshot of the rendered date

Import statement

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>

StatusLozenge

A lozenge to show a status.

Screenshot of a status lozenge

Import statement

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>

User

An inline component that represents a user, displaying their name, subject to the user's privacy settings.

Screenshot of the user

The User component can also be used outside a Text component, but appears instead as the user's profile picture.

Import statement

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

Props

NameTypeRequiredDescription
accountIdstringYesThe Atlassian account ID of the user.

Example

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

1
2
3
<Text>
  Driver: <User accountId="5a1234bc8d12345e3f1g11hi" />
</Text>

Note, you can access the current user's Atlassian account ID in the app product context.

UserGroup

An inline component that represents multiple users, displaying their names, subject to the users' privacy settings.

Screenshot of the user group

The UserGroup component can also be used outside a Text component, but appears instead as a stack of profile pictures.

Import statement

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

Props

NameTypeRequiredDescription
accountIdstringYesThe Atlassian account ID of the user.

Example

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

1
2
3
4
5
6
<Text>
  Contributors: <UserGroup>
        <User accountId="5a1234bc8d12345e3f1g11hi" />
        <User accountId="5a1234bc8d12345e3f1g11hi" />
    </UserGroup>
</Text>

Rate this page: