Components / Surfaces and motion / Glance status
M3 · Surfaces and motion New
Glance status
The closed line by itself: one status, no sheet.
<p class="c-glance"><span class="c-dot warn" aria-hidden="true"></span> 4 items need a reviewer</p>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- One sentence is the whole status.
- Opening a sheet would be a different component.
When not to use
- The line needs to expand. Use the expandable island.
- The status is binary and lives in the nav. Use the status pill.
Usage
<p class="c-glance"><span class="c-dot warn" aria-hidden="true"></span> 4 items need a reviewer</p>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| label | sentence | — | The whole status. |
| c-dot warn | class | — | Optional tint. The sentence remains. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves past the line. It is not a control. |
Accessibility
- The dot is aria-hidden.
- The sentence is the status.
Motion
- Nothing animates at rest.
Pattern origin
Pattern type: a one-line closed status.