Rate this page:
A piece of plain text with basic text formatting options.
It can also include inline components such as Badge, DateLozenge, and StatusLozenge.
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.
The text formatting options are listed here.
Name | Markup | Output |
---|---|---|
code | <Code text="code" /> | code |
em |
<Em>em</Em>
|
em |
link |
See the Link documentation for more details. | |
strike |
<Strike>strike</Strike>
| |
strong |
<Strong>strong</Strong>
|
strong |
1 2import ForgeUI, { Text } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | string | ForgeInlineComponent | Yes | The text and inline components to display. |
1 2import ForgeUI, { Text, Strong } from '@forge/ui'; <Text> Some <Strong>bold text</Strong> </Text>
An inline visual indicator of a numeric value like a score or number of notifications.
1 2import 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<Text> <Badge appearance="removed" text="-10" /> <Badge appearance="added" text="+27" /> <Badge appearance="primary" text="5K" /> </Text>
An inline component that displays a link.
1 2import ForgeUI, { Link } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
href | string | Yes | The prop |
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 . |
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>
An inline component that displays a calendar date.
1 2import 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<Text> <DateLozenge value={new Date('07-29-1988').getTime()} /> </Text>
A lozenge to show a status.
1 2import 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<Text> You have 4 tickets: <StatusLozenge text="In progress" appearance="inprogress" /> </Text>
An inline component that represents a user, displaying their name, subject to the user's privacy settings.
The User
component can also be used outside a Text component,
but appears instead as the user's profile picture.
1 2import ForgeUI, { User } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
accountId | string | Yes | The Atlassian account ID of the user. |
A text component with text content and a nested StatusLozenge
component.
1 2<Text> Driver: <User accountId="5a1234bc8d12345e3f1g11hi" /> </Text>
You can access the current user's Atlassian account ID in the app product context.
An inline component that represents multiple users, displaying their names, subject to the users' privacy settings.
The UserGroup
component can also be used outside a Text component,
but appears instead as a stack of profile pictures.
1 2import ForgeUI, { UserGroup, User } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
accountId | string | Yes | The Atlassian account ID of the user. |
A text component with text content and a nested StatusLozenge
component.
1 2<Text> Contributors: <UserGroup> <User accountId="5a1234bc8d12345e3f1g11hi" /> <User accountId="5a1234bc8d12345e3f1g11hi" /> </UserGroup> </Text>
Rate this page: