A compact status label whose color is supplied by the application. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
status
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<span>
<span class="status" aria-hidden="true"></span>
Operational
</span>Variants and composition
status is a small dot. Pair it with visible text and a consumer-provided tone; positioning on another component uses ordinary utilities.
Behavior and accessibility
Write a visible state label; color alone must not carry meaning. Geometry and semantic color are deliberately independent.
Reference
See the interactive Storybook specimen. Continue to Steps or return to the Official preset overview.