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 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>
A visual indicator for UI objects, for quick recognition and navigation.
1 2import ForgeUI, { Tag } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
text | string | Yes | The text content to display. |
color | string | The color of the tag. Valid values are green , blue ,
red , purple , grey , teal , yellow ,
green-light , blue-light , red-light ,
purple-light , grey-light , teal-light ,
and yellow-light . Defaults to light-grey . |
1 2<Tag text="decision" /> <Tag text="spec" color="blue-light" />
A layout container for multiple tags.
1 2import ForgeUI, { Tag, TagGroup } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<Tag> | Yes | The tag components to be displayed. See Tag for further details on the props. |
A simple group of two tag components.
1 2<TagGroup> <Tag text="tag 1" /> <Tag text="tag 2" /> </TagGroup>
A text callout to alert users to important information.
1 2import ForgeUI, { SectionMessage } from '@forge/ui';
Name | Type | Required | Description |
---|---|---|---|
children | Array<Text> | Yes | The content of the section message. |
title | string | The title of the section message. | |
appearance | "info" | "warning" | "error" | "confirmation" | "change" | Shows an icon next to the title and changes the appearance of the section message. If appearance is not specified, the default appearance is "info" . |
1 2<SectionMessage title="Heading" appearance="info"> <Text>Some text content</Text> <Text>More content</Text> </SectionMessage>
Rate this page: