Badges

Badges are used to quickly indicate status or information to a user visually. Each variant correlates to a specific status or value. Badges Design Guidelines.

active

Edit the code below to see your changes live!

<Badge label="active" variant="success" />

<Badge label="active" variant="success" />

API

Badge

Prop Name	Type	Default	Description
`label` *	`string`		The text applied to the component.
`variant`	`danger` \| `secondary` \| `success` \| `warning` \| `primary`	`secondary`	Determines which badge to display.

Props ending with * are required

Inherited Props

Margin Props

Variants

There are five types of variants to choose from: success, secondary, warning, danger, and primary. You can determine what type by using the variant prop.

secondarysuccesswarningdangerprimary

Edit the code below to see your changes live!

<Grid gridColumns="repeat(5, min-content)">
  <Badge variant="secondary" label="secondary" />
  <Badge variant="success" label="success" />
  <Badge variant="warning" label="warning" />
  <Badge variant="danger" label="danger" />
  <Badge variant="primary" label="primary" />
</Grid>

<Grid gridColumns="repeat(5, min-content)">
  <Badge variant="secondary" label="secondary" />
  <Badge variant="success" label="success" />
  <Badge variant="warning" label="warning" />
  <Badge variant="danger" label="danger" />
  <Badge variant="primary" label="primary" />
</Grid>

Beta