Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

ComponentReactregistry:ui2 dependencies

Badge

badge

Tone-tinted pill label on the semantic color scales, for status and classification at a glance.

Live, loading

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Notes from the author

Badge is the smallest tone surface: a static pill for a status or classification, with `strong` for the top tier of a scale. The label carries the meaning and the tone reinforces it, so it reads without relying on color alone. Use this instead of hand-rolling a tinted pill. Non-interactive and i18n-agnostic.
4 other registries

Similar components

Other registries' take on badge.

@whiskeyjack

More from @whiskeyjack