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>
);