Badge

This page describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

Badge

To add the Badge component to your app:

1
2
import { Badge } from '@forge/react';

Description

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

Props

Name	Type	Required	Description
`appearance`	`string`		The appearance of the badge. Valid values are `default`, `primary`, `important`, `added`, and `removed`. Defaults to `default`.

Examples

Appearance property

default

The default form of a badge.

1
2
   <Badge appearance="default">23</Badge>

primary

Use a primary badge to help draw attention to new or updated information.

1
2
   <Badge appearance="primary">23</Badge>

important

Use an important badge to call attention to information that needs to stand out. For example, notifications in Confluence.

1
2
   <Badge appearance="important">23</Badge>

added

Use an added appearance to show additions. For example, when characters are added to a line of code in Bitbucket.

1
2
   <Badge appearance="added">23</Badge>

removed

Use a removed appearance to show removals. For example, when characters are removed from a line of code in Bitbucket.

1
2
   <Badge appearance="removed">23</Badge>

Badge within a Text component

Use a Badge component as an inline text within a Text component.

1
2
   <Text>New issues <Badge appearance="primary">23</Badge></Text>