Forge Developer

Beta

Forge Developer

Beta

Rate this page:

Text

This component displays plain text (with some options for basic text formatting) and inline components.

Text components can be formatted using either Forge UI markup components or markdown syntax. Both formatting methods produce similar visual results, but using Forge UI markup components is recommended for better performance. Also, both formatting methods can't be used together in the same Text component.

Inline components are special components that can be used within a Text component to display inline content, for example, DateLozenge and StatusLozenge.

Supported text formatting options:

NameMarkdownMarkupOutput
code`code`<Code>code</Code>code
em

_em_

*em*

<Em>em</Em>

em

link

www.atlassian.com

[Atlassian](www.atlassian.com)

<Link href="www.atlassian.com" />

<Link href="www.atlassian.com">Atlassian</Link>

www.atlassian.com

Atlassian

strike~~strike~~ <Strike>strike</Strike> strike
strong

**strong**

__strong__

<Strong>strong</Strong>

strong

Usage

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

Props

NameTypeRequiredDescription
childrenstring | ForgeInlineComponentYesThe text and inline components to display.
format'markdown' | 'plaintext' | 'markup'The type of text content. Defaults to ‘markdown’.

Example

A text component displaying markdown content.

1
2
3
<Text>
 Some **bold text**
</Text>

The equivalent in markup format would be:

1
2
3
<Text format="markup">
 Some <Strong>bold text</Strong>
</Text>

Preview

Screenshot of what the rendered button should look like

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: