K
@kana-consultant/ui-kit v0.2.0 · docs

Primitives

Badge

Compact label for status, metadata, or counts. 8 tones, 3 sizes, optional dot.

Tones

All 8 tones
NeutralPrimaryAccentSuccessWarningDangerInfoOutline
<Badge tone='primary'>Primary</Badge>
<Badge tone='success'>Success</Badge>
<Badge tone='warning'>Warning</Badge>
<Badge tone='danger'>Danger</Badge>

With dot

Status-style dots
LiveDraftUrgentBeta
<Badge tone='success' dot>Live</Badge>
<Badge tone='warning' dot>Draft</Badge>

Props

Prop Type Default Description
tone 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'outline' 'neutral' Semantic color.
size 'sm' | 'md' | 'lg' 'md' Height + font size.
dot boolean false Shows a small leading dot.