title: Badge isExperimentalPackage: true

A badge is a decorative indicator used to either call attention to an item or for communicating non-actionable, supplemental information.

Example

<Badge tone="info">Label</Badge>

Tones

const tones = ['accent', 'caution', 'critical', 'info', 'neutral'];

return (
  <Inline gap="small">
    {tones.map(tone => (
      <Badge key={tone} tone={tone}>
        {tone}
      </Badge>
    ))}
  </Inline>
);

Props

Badge

IndicatorDot