Badge

Badges are compact, non-interactive labels used to highlight metadata, counts, or short categories.

Overview

The catnip-badge custom element provides seven semantic intents, subtle and strong appearances, three sizes, and optional icons on either side of its label.

Prop	Role
intent	Semantic color: neutral, informative, success, warning, danger, disabled, brand
appearance	subtle uses a wash; strong uses a solid surface
size	s, m, or l; a one-icon badge is square at 20px, 24px, or 28px
leftIcon, rightIcon	Typed CatnipIconName values; named slots accept custom icon content
ariaLabel	Accessible name when the default slot is empty (required for icon-only)

Live example

Accessibility

• Badge is intentionally non-interactive. Use a Button or Chip when the element must perform an action or support selection.
• The default-slot label supplies the meaning. Do not rely on intent color or an icon alone.
• Icon-only (empty default slot): set aria-label so the badge has an accessible name. The host uses role="img". In development, a console warning is logged if icon-only badge has no aria-label.
• Built-in and slotted icons are decorative and hidden from assistive technology.