Badge
Compact status indicators and semantic labels with optional dot indicators for tables, cards, and navigation items.
Installation
You can add this badge component using our CLI or manually:
Dark mode ready - this component follows Ethereal UI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx @etherealui/cli@latest add badge
Status dots
Add the dot prop to display a status indicator circle next to the label.
NeutralActiveCompletedPendingFailed