Closed
Register closed
Components / Navigation / Status pill
N3 · Navigation
Status pill
A short open or closed state with a dot and a text label.
<p class="c-status" data-state="open"><span class="c-dot open" aria-hidden="true"></span> Register open</p>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A global state should stay visible beside navigation.
- The state is binary and named.
When not to use
- The state needs a chart.
- More than two states share the same pill.
Usage
<p class="c-status" data-state="open"><span class="c-dot open" aria-hidden="true"></span> Register open</p>
Variants
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data-state | open or closed | open | Which label and dot colour to show. |
| c-dot open | class | — | Ok colour. The text still names the state. |
| c-dot closed | class | — | Off colour. |
Keyboard
| Key | Action |
|---|---|
| Tab | Reaches the toggle in this preview. |
| Enter | Activates the toggle. |
Accessibility
- The dot is aria-hidden. The words carry the state.
- Colour is not the only signal.
Motion
- The dot does not pulse. Nothing animates at rest.
Pattern origin
Pattern type: a status badge with a live dot.