Text

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

Text components can be formatted using either UI kit markup components or markdown syntax. Both formatting methods produce similar visual results, but using UI kit 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:

Usage

1

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

Props

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

DateLozenge

An inline component that displays a calendar date.

Usage

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>

Preview

StatusLozenge

An inline component that displays a status lozenge.

Usage

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>

Preview