A row of two to four short bars, as many filled as places are taken, with the same in words, such as "1 of 2 places".
Options
The capacity meter has no choices: it is drawn one way.
Examples
Usage
One of two places taken: a filled bar, an empty one, and the same in words.
Number of places
Two, three or four places, one bar each.
Empty and full
No bar filled, and every bar filled.
Other words
Another word for what is counted, or words of your own, which a screen reader also hears.
Guidelines
Purpose
Shows how many of a few places are taken: how many agents are working on a project out of the two it allows, how many seats on a plan are in use. A row of short bars, one per place, as many filled as are taken, then the same in words, such as "1 of 2 places".
When to use
- For a small, fixed number of places, two to four, where a reader wants to see at a glance whether there is room.
- In the head of a board column, under its title.
When not to use
- For a large number, or a share of a total such as storage. Use a meter.
- For how far along a task is. Use a progress bar.
- For a count with no limit. Use a badge or plain text.
Usage rules
Do
- Name it for what it counts and where.
- Keep it to two, three or four places.
Don't
- Use it for more places than can be counted at a glance.
- Write words that leave out the count.
Keep it to a few places, so the bars can be counted at a glance.
Many places make a row of bars nobody counts; use a meter with a number instead.
Anatomy
- The block: the bars, then the words, side by side.
- The segments part, the row of bars.
- The segment part, one bar per place: the track color while free, the inverse surface once taken.
- The words part, the count in a small body style and the subtle text color: "1 of 2 places", or words of your own.
Behavior
The number of places is never below one, and the places taken are kept between none and all of them. The words are built from the two numbers and the word for what is counted, places by default; words of your own replace them.
Accessibility
What it does for you
- The whole is one meter. A screen reader hears its name and the words as its value, such as "Agents on the blog, meter, 1 of 2 places".
- The words say what the bars show, so the color of the bars is never the only sign.
- In high-contrast mode each bar is outlined and the taken ones are filled with the text color.
What you must do
- Give it a name:
aria-label, oraria-labelledbypointing at the heading it sits under. - Make words of your own say the count, since they are also the value a screen reader hears.
How to test
- With a screen reader, the meter is read by its name and its words as the value, such as "1 of 2 places".
- Tab past it: the meter takes no focus.
- In a forced-color mode, the bars are outlined and the taken ones filled.
- With text at 200% and the page 320 pixels wide, the words wrap and stay whole.
Source
The files the capacity meter is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-capacity-meter — Capacity meter. Figma "Capacity meter" 7118:653 (Segments × Filled, 12 variants).
* How many of a few places are taken: a row of short bars, as many filled as are used, then the same in
* words ("1 of 2 places"). The filled bars are the inverse surface, the empty ones the track; the meaning
* is in the words, so the bars are never the only sign. */
.smbk-capacity-meter {
display: inline-flex;
align-items: center;
gap: var(--smbk-space-inline-md);
vertical-align: middle;
}
.smbk-capacity-meter__segments {
display: inline-flex;
flex-shrink: 0;
gap: var(--smbk-space-inline-xs);
}
.smbk-capacity-meter__segment {
display: block;
width: var(--smbk-size-20);
height: var(--smbk-size-8);
border-radius: var(--smbk-radius-full);
background: var(--smbk-color-surface-track);
}
.smbk-capacity-meter__segment--filled {
background: var(--smbk-color-surface-inverse);
}
/* Figures of one width, so the words do not shift sideways as a place is taken or freed. */
.smbk-capacity-meter__words {
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
font-variant-numeric: tabular-nums;
}
/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills; each bar is outlined in the text color and the
filled ones are filled with it, so taken and free places still differ. */
@media (forced-colors: active) {
.smbk-capacity-meter__segment {
outline: var(--smbk-border-width-hairline) solid CanvasText;
outline-offset: calc(-1 * var(--smbk-border-width-hairline));
}
.smbk-capacity-meter__segment--filled {
background: CanvasText;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| space.inline.md--smbk-space-inline-md | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| space.inline.xs--smbk-space-inline-xs | 4px | Spacing | |
| size.20--smbk-size-20 | 20px | Size | |
| size.8--smbk-size-8 | 8px | Size | |
| radius.full--smbk-radius-full | 9999px | Radius | |
| color.surface.track--smbk-color-surface-track | light: #7c8692dark: #4e555echanges with theme | Color | |
| color.surface.inverse--smbk-color-surface-inverse | light: #2d3237dark: #e7ebf0changes with theme | Color | |
| color.text.subtle--smbk-color-text-subtle | light: #4e555edark: #9ba5b1changes with theme | Color | |
| typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| border-width.hairline--smbk-border-width-hairline | 1px | Border width |
Manifest
{
"name": "capacity-meter",
"block": "smbk-capacity-meter",
"summary": "A row of two to four short bars, as many filled as places are taken, with the same in words, such as \"1 of 2 places\".",
"adapt": "css",
"axes": {},
"flags": {},
"parts": [
"segments",
"segment",
"words"
],
"figmaNodeId": "7118:653"
}