How much of an allowance is used, as short meters with their values and when it starts again, in a toolbar or stacked.A block is copied, not installed: take an example's code and the stylesheet at the foot of the page, and rename the site- prefix to your project's own.
Examples
Usage
The toolbar layout: two allowances on one line, the first close to its limit, and when they start again.
Stacked
The stacked layout: the meter under its name and value, for a panel or a menu.
Stacked, two allowances
Stacked with two allowances, each under its own name and value.
In a toolbar
Inside a docked toolbar, between its title and its main action; nearly at the limit, in the danger color.
Built from
Guidelines
Purpose
Shows how much of an allowance is used, such as a weekly and a five-hour limit, small enough for a toolbar: each allowance a short meter between its name and its value, then a line saying when it starts again.
When to use
- In a toolbar or an app bar, the toolbar layout: one line as tall as a small control.
- In a panel, a menu or a popover, the stacked layout: each meter under its name and value.
When not to use
- For how far along a task is. Use a progress bar.
- For a few places that are taken or free. Use a capacity meter.
Usage rules
Do
- Name each allowance by its period.
- Say when it starts again.
Don't
- Put more than two meters in a toolbar.
- Show the warning by color alone.
Anatomy
- The block, a group named for what it measures.
- An optional icon before the meters, in the toolbar layout.
- Each item: the name and the value in the small label style, and the bar, the Meter component, carrying the block's meter class beside its own. Its tone is the page's choice: the series color, or warning and danger as the allowance runs out.
- The line saying when it starts again, in the extra small body style and the subtlest text color.
Behavior
The toolbar layout keeps every meter short and on one line; the stacked layout gives each meter the whole width. It takes no focus; to open details from it, put it inside a button.
Accessibility
What it does for you
- The block is a group.
- Each bar is a meter with a name and its value in words, such as "Weekly allowance, 86% used"; the drawn name and value are hidden from assistive technology, so they are not read twice.
What you must do
- Name the group by its
aria-label, such as "Usage". - When the tone turns to warning or danger, say so in the value as well, such as "86% used, close to the limit".
How to test
- With a screen reader, the group is read by its name, and each meter once, by its name and its value in words; near the limit, the value says so.
Source
The usage meter's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.
Stylesheet
/* site-usage-meter — Usage meter, a block: how much of an allowance is used, as short meters with their names and
* values and a line saying when it starts again. Copy it into your project and rename site- to your project's own
* prefix. Each bar is the Meter component, given this block's meter class beside its own. Two layouts: toolbar,
* one line as tall as a small control, for a toolbar or a bar; stacked, a column for a panel or a menu. */
.site-usage-meter {
display: flex;
color: var(--smbk-color-text-default);
}
.site-usage-meter__item {
display: grid;
align-items: center;
}
.site-usage-meter__icon {
flex: none;
color: var(--smbk-color-icon-subtle);
}
.site-usage-meter__label {
grid-area: label;
color: var(--smbk-color-text-subtle);
}
.site-usage-meter__value {
grid-area: value;
color: var(--smbk-color-text-default);
font-variant-numeric: tabular-nums;
}
.site-usage-meter__label,
.site-usage-meter__value {
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);
white-space: nowrap;
}
.site-usage-meter__meter {
grid-area: meter;
}
.site-usage-meter__meta {
color: var(--smbk-color-text-subtlest);
font-family: var(--smbk-typography-body-xs-font-family);
font-size: var(--smbk-typography-body-xs-font-size);
font-weight: var(--smbk-typography-body-xs-font-weight);
line-height: var(--smbk-typography-body-xs-line-height);
letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}
/* Toolbar: one line, as tall as a small control: the icon, each meter with its name before it and its value after,
then when it starts again. */
.site-usage-meter--layout-toolbar {
align-items: center;
gap: var(--smbk-space-inline-lg);
min-height: var(--smbk-size-control-sm);
padding-inline: var(--smbk-space-inset-xs);
}
.site-usage-meter--layout-toolbar .site-usage-meter__item {
grid-template-areas: 'label meter value';
column-gap: var(--smbk-space-inline-sm);
}
.site-usage-meter--layout-toolbar .site-usage-meter__meter {
width: var(--smbk-size-56);
}
.site-usage-meter--layout-toolbar .site-usage-meter__meta {
white-space: nowrap;
}
/* Stacked: a column as wide as its space: each meter under its name and value, then when it starts again. */
.site-usage-meter--layout-stacked {
flex-direction: column;
gap: var(--smbk-space-stack-xs);
}
.site-usage-meter--layout-stacked .site-usage-meter__item {
grid-template-areas: 'label value' 'meter meter';
grid-template-columns: 1fr auto;
row-gap: var(--smbk-space-stack-xs);
}
.site-usage-meter--layout-stacked .site-usage-meter__item + .site-usage-meter__item {
margin-block-start: var(--smbk-space-stack-xs);
}