Badge

Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.

Example#

<Badge variant="positive">Licensed</Badge>

<Badge variant="positive">Licensed</Badge>

<Badge variant="positive">
  Licensed
</Badge>

Content#

Badges can hav a label, an icon, or both. An icon is provided by passing an icon component as a child to the Badge. A visible label can be provided by passing a string or a Text component as a child, depending on whether the Badge has an accompanying icon.

import {Text} from '@react-spectrum/text';
import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';

<Badge variant="positive">
  <CheckmarkCircle />
  <Text>Icon + Label</Text>
</Badge>

import {Text} from '@react-spectrum/text';
import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';

<Badge variant="positive">
  <CheckmarkCircle />
  <Text>Icon + Label</Text>
</Badge>

import {Text} from '@react-spectrum/text';
import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';

<Badge variant="positive">
  <CheckmarkCircle />
  <Text>
    Icon + Label
  </Text>
</Badge>

Accessibility#

If a visible label isn't specified, an aria-label must be provided for accessibility.

Internationalization#

To internationalize a Badge, a localized string should be set as the child content of the Badge. For languages that are read right-to-left (e.g. Hebrew and Arabic), the Badge is automatically flipped.

Props#

Visual options#

Variant#

View guidelines

When badges have a semantic meaning, they should use semantic colors. Use the appropriate color to indicate status as follows.

<Badge variant="positive">
  Green: Approved, Complete, Success, New, Purchased, Licensed
</Badge>
<Badge variant="info">Blue: Active, In Use, Live, Published</Badge>
<Badge variant="negative">Red: Error, Alert, Rejected, Failed</Badge>
<Badge variant="neutral">
  Gray: Archived, Deleted, Paused, Draft, Not Started, Ended
</Badge>

<Badge variant="positive">
  Green: Approved, Complete, Success, New, Purchased,
  Licensed
</Badge>
<Badge variant="info">
  Blue: Active, In Use, Live, Published
</Badge>
<Badge variant="negative">
  Red: Error, Alert, Rejected, Failed
</Badge>
<Badge variant="neutral">
  Gray: Archived, Deleted, Paused, Draft, Not Started,
  Ended
</Badge>

<Badge variant="positive">
  Green: Approved,
  Complete, Success,
  New, Purchased,
  Licensed
</Badge>
<Badge variant="info">
  Blue: Active, In Use,
  Live, Published
</Badge>
<Badge variant="negative">
  Red: Error, Alert,
  Rejected, Failed
</Badge>
<Badge variant="neutral">
  Gray: Archived,
  Deleted, Paused,
  Draft, Not Started,
  Ended
</Badge>

When status lights are used to color code categories, they use label colors. The ideal usage for these is when there are 8 or fewer categories being color coded.

<Badge variant="seafoam">Seafoam</Badge>
<Badge variant="indigo">Indigo</Badge>
<Badge variant="purple">Purple</Badge>
<Badge variant="fuchsia">Fuchsia</Badge>
<Badge variant="magenta">Magenta</Badge>
<Badge variant="yellow">Yellow</Badge>

<Badge variant="seafoam">Seafoam</Badge>
<Badge variant="indigo">Indigo</Badge>
<Badge variant="purple">Purple</Badge>
<Badge variant="fuchsia">Fuchsia</Badge>
<Badge variant="magenta">Magenta</Badge>
<Badge variant="yellow">Yellow</Badge>

<Badge variant="seafoam">
  Seafoam
</Badge>
<Badge variant="indigo">
  Indigo
</Badge>
<Badge variant="purple">
  Purple
</Badge>
<Badge variant="fuchsia">
  Fuchsia
</Badge>
<Badge variant="magenta">
  Magenta
</Badge>
<Badge variant="yellow">
  Yellow
</Badge>

Disabled#

View guidelines

Use the isDisabled prop to match the state of a containing element. Note that the isDisabled prop alters the visual style of the Badge, but does not convey any state information to assistive technology.

<Badge variant="yellow" isDisabled>Yellow</Badge>

<Badge variant="yellow" isDisabled>Yellow</Badge>

<Badge
  variant="yellow"
  isDisabled
>
  Yellow
</Badge>