Rate this page:
This component displays plain text (with some options for basic text formatting) and inline components.
Inline components are special components that can be used within a Text
component to display
inline content, for example, Badge
, DateLozenge
, and StatusLozenge
.
Supported text formatting options:
Name | Markup | Output |
---|---|---|
code | <Code text="code" /> | code |
em |
<Em>em</Em>
|
em |
link |
| |
strike |
<Strike>strike</Strike>
| |
strong |
<Strong>strong</Strong>
|
strong |
1
import ForgeUI, { Text } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | string | ForgeInlineComponent | Yes | The text and inline components to display. |
A text component displaying markup content.
1 2 3
<Text>
Some <Strong>bold text</Strong>
</Text>
Badges are inline components used as visual indicators for numeric values, such as notifications and scores.
1
import ForgeUI, { Badge } from '@forge/ui';
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 . |
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>
An inline component that displays a calendar date.
1
import ForgeUI, { DateLozenge } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
value | number | Yes | The date represented as the number of milliseconds elapsed since Unix epoch. |
A text component with a nested DateLozenge
component.
1 2 3
<Text>
<DateLozenge value={new Date('07-29-1988').getTime()} />
</Text>
An inline component that displays a status lozenge.
1
import ForgeUI, { StatusLozenge } from '@forge/ui';
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 . |
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>
Rate this page: