/

<Badge> Component

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

Share
Code Editor


<>

  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>

    <Badge theme="vault">New</Badge>

    <Badge theme="consul">New</Badge>

    <Badge theme="nomad">New</Badge>

    <Badge theme="terraform">New</Badge>

    <Badge theme="waypoint">New</Badge>

    <Badge theme="boundary">New</Badge>

    <Badge theme="packer">New</Badge>

    <Badge theme="vagrant">New</Badge>

    <Badge theme="neutral">New</Badge>

    <Badge theme="black">New</Badge>

    <Badge theme="white">New</Badge>

  </div>



  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, marginTop: 32 }}>

    <Badge theme="vault" variant="secondary">New</Badge>

    <Badge theme="consul" variant="secondary">New</Badge>

    <Badge theme="nomad" variant="secondary">New</Badge>

    <Badge theme="terraform" variant="secondary">New</Badge>

    <Badge theme="waypoint" variant="secondary">New</Badge>

    <Badge theme="boundary" variant="secondary">New</Badge>

    <Badge theme="packer" variant="secondary">New</Badge>

    <Badge theme="vagrant" variant="secondary">New</Badge>

    <Badge theme="neutral" variant="secondary">New</Badge>

    <Badge theme="black" variant="secondary">New</Badge>

    <Badge theme="white" variant="secondary">New</Badge>

  </div>

</>
NameDescription
children*
string
The text that appears inside the badge.
theme
string
Styles the badge background and text color.
Options: "neutral", "white", "black", "nomad", "consul", "terraform", "vault", "packer", "vagrant", "waypoint", "boundary"
variant
string
Variant styling based upon choosen theme.
Options: "primary", "secondary"