Status

Semantic status indicator with a colored dot or icon plus an optional label. Use for compact state labels in tables, lists, and summaries — not for interactive chips or alerts. Empty the default slot for icon-only.

Overview

The catnip-status custom element shows a status dot (default) plus label text from the default slot. Set leftIcon (or leftIconSlot) to replace the dot with a Catnip icon. With no slotted text it uses icon-only layout.

Prop	Role
intent	Semantic color: neutral, informative, success, warning, danger, disabled, brand
filled	Pill with a subtle background. Off is indicator + label only
size	Density m (default) or l
leftIcon	Optional Catnip icon; replaces the dot
ariaLabel	Accessible name when the default slot is empty (required for icon-only)

Live example

Accessibility

• The label text in the default slot is the accessible name — do not rely on colour or the icon alone.
• The status dot and leading icon are decorative (aria-hidden).
• Icon-only (empty default slot): set aria-label so the indicator has an accessible name. The host uses role="img". In development, a console warning is logged if icon-only status has no aria-label.
• Prefer clear wording in the label (for example “Active”, “Failed”) rather than encoding meaning only in intent.