Text

A piece of plain text with basic text formatting options.

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

Usage notes

The text formatting options are listed here.

Import statement

1

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

Props

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.

Import statement

1

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

Props

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>

Link

An inline component that displays a link.

Import statement

1

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

Props

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.

Import statement

1

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

Props

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.

Import statement

1

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

Props

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.

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

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.

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

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>