Counter

Compact numeric count badge. Use for unread counts, selected-item totals, and other small quantity indicators — not for interactive steppers or form number inputs.

Overview

The catnip-counter custom element shows a rounded count pill.

Prop	Role
value	Number or string shown inside the badge
appearance	primary or secondary
disabled	Visually mutes either appearance
size	Density s, m (default), or l

Live example

Accessibility

• The visible value is the accessible text — do not rely on colour alone to convey meaning.
• Counter is presentational; pair it with a labelled control or nearby text when the count needs context (for example “3 unread”).
• disabled is visual only — it does not change interaction because Counter is not a control. It can be combined with either appearance.