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.

Name	Markup	Output
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>` See the Link documentation for more details.	www.atlassian.com Atlassian
strike	`<Strike>strike</Strike>`	~~strike~~
strong	`<Strong>strong</Strong>`	strong

Import statement

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

Props

Name	Type	Required	Description
`children`	`string \| ForgeInlineComponent`	Yes	The text and inline components to display.

Example

1
2
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
2
import ForgeUI, { Badge } from '@forge/ui';

Props

Name	Type	Required	Description
`text`	`string`	Yes	The text within the badge.
`appearance`	`string`		The 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
<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.

Screenshot of the rendered link

Import statement

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

Props

Name	Type	Required	Description
`href`	`string`	Yes	The prop `href` behaves like an HTML `href`. You should include `http(s)://` for full URLs. Relative paths, such as `/wiki`, are also supported.
`appearance`	`string`		The appearance of the link. Valid values are `link`, `button`, and `primary-button`. Defaults to `link`.
`openNewTab`	`boolean`		Whether 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
<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
2
import ForgeUI, { DateLozenge } from '@forge/ui';

Props

Name	Type	Required	Description
`value`	`number`	Yes	The date represented as the number of milliseconds elapsed since Unix epoch.

Example

A text component with a nested DateLozenge component.

1
2
<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
2
import ForgeUI, { StatusLozenge } from '@forge/ui';

Props

Name	Type	Required	Description
`text`	`string`	Yes	The text content of the status lozenge.
`appearance`	`string`		The 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
<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
2
import ForgeUI, { User } from '@forge/ui';

Props

Name	Type	Required	Description
`accountId`	`string`	Yes	The Atlassian account ID of the user.

Example

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

1
2
<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
2
import ForgeUI, { UserGroup, User } from '@forge/ui';

Props

Name	Type	Required	Description
`accountId`	`string`	Yes	The Atlassian account ID of the user.

Example

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

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