Component · C-003

Badge

A short metadata label for states, counts and tags. Tone supplies color and appearance controls weight; the text always carries the meaning.

Install

Install koten-theme first when the project has no Koten tokens yet.

npx shadcn@latest add https://koten.codehive.com.co/r/badge.json

Accessibility

State is never conveyed by color alone: there is always visible text.
The dot is decorative and carries aria-hidden, so it does not duplicate information.
Badge uses text-2xs as metadata; do not use it for paragraphs or primary content.
Text tones meet AA on paper and surface according to the token test.

Read the whole page