Rate this page:

Text

This component displays plain text or a subset of markdown content, as well as inline components. Inline components are special components that can be used within a Text component to display inline content, for example, DateLozenge and StatusLozenge.

Supported markdown syntax:

NameMarkdownOutput
code`code`code
em

_em_

*em*

em

em

link

www.atlassian.com

[Atlassian](www.atlassian.com)

www.atlassian.com

Atlassian

strike~~strike~~strike
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'The type of text content. Defaults to ‘markdown’.

Example

A text component displaying markdown content.

1
2
3
<Text>
 Some **bold text**
</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: