`<Badge>` Component

Badges are non-interactive labels highlighting metadata such as status or categorization.


  <div style={{ display: 'flex', gap: 16 }}>
    <Badge variant="primary" theme="action" page="light">Badge</Badge>
  </div>

Name	Description
`children*` string	The text that appears inside the badge.
`theme` string	Styles the badge background and text color. Options: `"action"`, `"neutral"`, `"boundary"`, `"consul"`, `"nomad"`, `"packer"`, `"terraform"`, `"vault"`, `"vagrant"`, `"waypoint"`
`variant` string	Variant styling based upon choosen theme. Options: `"primary"`, `"secondary"`
`page` string	Variant styling based page color Options: `"light"`, `"faint"`, `"strong"`, `"strongFaint"`, `"action"`, `"actionFaint"`

Examples

Badge