CatalystBadgev1.1.3Ready for Production
Display status indicators, labels, and counts for categorization and information hierarchy in product interfaces.
Prefer AI-assisted development?
Catalyst Badge is a production-ready component built with Radix's Slot for flexible composition, built-in design tokens, and CVA variants — so you get a consistent way to show statuses, labels, and counts with zero config.
Installation
npm install @pmi/catalyst-badgeimport { Badge } from '@pmi/catalyst-badge';Variants
Badge supports three visual styles for different interface contexts:
Solid
Neutral
Neutral color for general-purpose labeling without specific semantic meaning
Info
Info for semantic status communication
Success
Success for semantic status communication
Warning
Warning for semantic status communication
Danger
Danger for semantic status communication
Accent
Accent color for high-emphasis statuses
Off-black
The default Badge color — rendered when no color or variant prop is set (variant="solid" color="off-black"). Use for high-emphasis statuses that don't fit semantic categories.
Soft
Neutral
Neutral color for general-purpose labeling without specific semantic meaning
Info
Info for semantic status communication
Success
Success for semantic status communication
Warning
Warning for semantic status communication
Danger
Danger for semantic status communication
Accent
Accent color for high-emphasis statuses
Off-black
Off-black color for high-emphasis statuses that don't fit semantic categories
Outline
Neutral
Neutral color for general-purpose labeling without specific semantic meaning
Info
Info for semantic status communication
Success
Success for semantic status communication
Warning
Warning for semantic status communication
Danger
Danger for semantic status communication
Accent
Accent color for high-emphasis statuses
Off-black
Off-black color for high-emphasis statuses that don't fit semantic categories
Sizes
Three size options are available, with the ability to apply custom overrides as needed
Common Patterns
With Icon
API Reference
Badge
Accepts all standard React div attributes (onClick, aria-*, etc.) and the unstyled prop for opting out of Catalyst styling.
Badge does not forward refs; it renders a div by default, or a Radix Slot when asChild is set.
Prop
Type
Badge has no compound subcomponents.
Accessibility
Keyboard Interactions
Badge is a non-interactive display element.
If you use asChild to render Badge as an interactive element (e.g. a <button> or <a>), standard browser keyboard behaviour applies to that element.
ARIA
- Badge renders as a
<div>by default (or whatever element you supply viaasChild) — it carries no implicit ARIA role. - Use
aria-labelto give context when the badge content alone is not self-explanatory (e.g. a standalone count like "3" — preferaria-label="3 unread notifications"). - For purely decorative badges that duplicate visible text already present on the page, add
aria-hidden="true"to avoid screen-reader repetition. - Catalyst does not add any ARIA attributes automatically; labelling responsibility belongs to the consuming team.
Choosing the Right Component
Use Badge to label, categorize, or show a count next to other content. Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| A dismissible tag the user can remove | Tag |
| A full-width status or feedback message | Alert |
| A short contextual message attached to a specific UI element | Callout |