Last updated Jan 20, 2021

Badge

An inline visual indicator of a numeric value like a score or number of notifications.

Image of badges

Import statement

1
2
import ForgeUI, { Badge } from '@forge/ui';

Props

NameTypeRequiredDescription
textstringYesThe text within the badge.
appearancestringThe appearance of the badge. Valid values are added, default, important, primary, and removed. Defaults to default.

Example

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>

DateLozenge

An inline component that displays a calendar date.

Screenshot of the rendered date

Import statement

1
2
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
<Text>
  <DateLozenge value={new Date('07-29-1988').getTime()} />
</Text>

StatusLozenge

A lozenge to show a status.

Screenshot of a status lozenge

Import statement

1
2
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
<Text>
  You have 4 tickets: <StatusLozenge text="In progress" appearance="inprogress" />
</Text>

Tag

A visual indicator for UI objects, for quick recognition and navigation.

Image of a tag

Import statement

1
2
import ForgeUI, { Tag } from '@forge/ui';

Props

NameTypeRequiredDescription
textstringYesThe text content to display.
colorstringThe 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.

Example

1
2
<Tag text="decision" />
<Tag text="spec" color="blue-light" />

TagGroup

A layout container for multiple tags.

Image of tag group

Import statement

1
2
import ForgeUI, { Tag, TagGroup } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<Tag>YesThe tag components to be displayed. See Tag for further details on the props.

Example

A simple group of two tag components.

1
2
<TagGroup>
    <Tag text="tag 1" />
    <Tag text="tag 2" />
</TagGroup>

SectionMessage

A text callout to alert users to important information.

Screenshot of what the rendered section message should look like

Import statement

1
2
import ForgeUI, { SectionMessage } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<Text>YesThe content of the section message.
titlestringThe 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".

Example

1
2
<SectionMessage title="Heading" appearance="info">
  <Text>Some text content</Text>
  <Text>More content</Text>
</SectionMessage>

Rate this page: