A small colored dot that marks a status, with the status in words beside it.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
tonesmbk-status-dot--tone-<value> | successinfowarningdangerdefault | success | The status the dot marks: success, info, warning and danger take the feedback colors; default the subtle gray, for a status that is neither good nor bad, such as offline. |
Examples
Usage
Services and their states: the words say the status, the dot lets the eye find it.
WebsiteOnline
Search indexSyncing
EmailDegraded
BackupsFailed
Old reportsOffline
Tones
Success, info, warning, danger, and the default gray for a status that is neither good nor bad.
OnlineSyncingDegradedFailedOffline
Without words
Beside a name, a dot alone carries its status as its name, read as one image.
Maya ChenAna Silva
Beside a status written out
When the sentence says the status, the dot is hidden from screen readers.
The nightly backup failed at 2:14 AM.
Guidelines
Purpose
Marks a status beside a name, such as a service that is online, a sync that is running or a job that failed: a small round dot in the status' color, with the status in words beside it. The words carry the meaning; the dot lets the eye find the status at a glance.
When to use
- Beside a name in a list, a table or a card, to say the state of the thing named: online or offline, healthy or failing.
- In a footer or a toolbar, for the state of a whole service.
When not to use
Usage rules
Do
- Use a short word or two for the status: "Online", "Syncing", "Failed".
- Keep each tone to one meaning across a page.
Don't
- Show a dot without words or a name.
- Use the danger tone for anything that is not a failure.
BackupsFailed
Say the status in a word or two beside the dot.
Backups
A dot alone leaves anyone who cannot tell the colors apart guessing.
Anatomy
- The block, a row as wide as its content.
- The dot part, a small circle in the tone's color: green for success, blue for info, amber for warning, red for danger, and gray for the default tone, a status that is neither good nor bad.
- The label part, the status in words in a small label style, after the dot. It is left out when the status is written somewhere else.
Behavior
The dot keeps its size; the words wrap after it when the line is too narrow. Nothing moves and nothing takes focus.
Accessibility
What it does for you
- A screen reader hears the words; the dot beside them is hidden from it.
- A dot with no words, given a name through
aria-label, is read as one image ("Online"). - In high contrast mode every dot takes the text color, and the words tell the statuses apart.
- Nothing about it takes focus.
What you must do
- Give a dot with no words a name,
aria-label, so it is read as one image ("Online"). - Hide a dot beside a status already written out with
aria-hidden. - Never tell statuses apart by color alone: the words say which one it is.
How to test
- With a screen reader, each status is read by its words only, and a dot with no words by its name.
- In a forced-color mode, every dot takes the text color and the statuses are still told apart by their words.
- Tab through the page: focus never lands on the dot.
Source
The files the status dot is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-status-dot — Status dot. Figma "Status dot" 7096:77 (Tone × Label).
* A round 8 dot in its tone's feedback icon color (the default tone: the subtle
* icon color, the block's own), then, when given, the status in words in Label SM and the default
* text color, the small inline step apart. The words are the status; the dot
* is a cue beside them, never the only one. */
.smbk-status-dot {
display: inline-flex;
align-items: center;
gap: var(--smbk-space-inline-sm);
vertical-align: middle;
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-label-sm-font-family);
font-size: var(--smbk-typography-label-sm-font-size);
font-weight: var(--smbk-typography-label-sm-font-weight);
line-height: var(--smbk-typography-label-sm-line-height);
letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}
.smbk-status-dot__dot {
flex-shrink: 0;
width: var(--smbk-size-8);
height: var(--smbk-size-8);
border-radius: var(--smbk-radius-full);
background: var(--smbk-color-icon-subtle);
}
/* ---- tone. The default tone is the block's own look above. ---- */
.smbk-status-dot--tone-success .smbk-status-dot__dot {
background: var(--smbk-color-feedback-success-icon);
}
.smbk-status-dot--tone-info .smbk-status-dot__dot {
background: var(--smbk-color-feedback-info-icon);
}
.smbk-status-dot--tone-warning .smbk-status-dot__dot {
background: var(--smbk-color-feedback-warning-icon);
}
.smbk-status-dot--tone-danger .smbk-status-dot__dot {
background: var(--smbk-color-feedback-danger-icon);
}
/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the
user's own colors. Nothing here applies outside that mode. */
@media (forced-colors: active) {
/* The dot is a fill and nothing else, so it would vanish. It takes the palette's text color; the words
beside it, or its name, say which status it is. */
.smbk-status-dot__dot {
forced-color-adjust: none;
background: CanvasText;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| space.inline.sm--smbk-space-inline-sm | comfortable: 6pxcompact: 4pxchanges with density | Spacing | |
| color.text.default--smbk-color-text-default | light: #232527dark: #e7ebf0changes with theme | Color | |
| typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px | The quick brown fox | Typography |
| size.8--smbk-size-8 | 8px | Size | |
| radius.full--smbk-radius-full | 9999px | Radius | |
| color.icon.subtle--smbk-color-icon-subtle | light: #4e555edark: #c4cdd8changes with theme | Color | |
| color.feedback.success.icon--smbk-color-feedback-success-icon | light: #037a1fdark: #54b85bchanges with theme | Color | |
| color.feedback.info.icon--smbk-color-feedback-info-icon | light: #3b5ce3dark: #7fa0ffchanges with theme | Color | |
| color.feedback.warning.icon--smbk-color-feedback-warning-icon | light: #b14904dark: #fa8349changes with theme | Color | |
| color.feedback.danger.icon--smbk-color-feedback-danger-icon | light: #cc0d0ddark: #fe7d6dchanges with theme | Color |
Manifest
{
"name": "status-dot",
"block": "smbk-status-dot",
"summary": "A small colored dot that marks a status, with the status in words beside it.",
"adapt": "css",
"axes": {
"tone": {
"values": [
"success",
"info",
"warning",
"danger",
"default"
],
"default": "success",
"description": "The status the dot marks: success, info, warning and danger take the feedback colors; default the subtle gray, for a status that is neither good nor bad, such as offline."
}
},
"flags": {},
"parts": [
"dot",
"label"
],
"figmaNodeId": "7096:77"
}