Status and count
Badge
A small error-role indicator for numeric counts, short labels, capped values, and status dots.Anatomy
The public structure is divided into four responsibilities.
- 1
Root
Defines semantics, geometry, and the interaction target.
- 2
Primary content
Communicates the value, action, or current selection.
- 3
State layer
Communicates focus, progress, disabled, error, and other supported states.
- 4
Optional slots
Extend composition through coherent presets without breaking the contract.
Interactive configuration
Adjust the primary props and choose coherent slot presets.
Props stay atomic
Independent primitive values use individual controls.
Slots use presets
Related slot combinations switch as one preset without invalid states.
States
States preserve accessibility and expected feedback.
Available
The component presents its current value and accepts interaction.
Focus visible
Keyboard focus remains visible across themes.
Unavailable
The unavailable state blocks action while retaining context.
Validation and recovery
When supported, error state explains the problem and recovery.
In context
The component is shown in a working composition built from public kit primitives.