Legend item

Design$1,357

Legend item options
Choice	Values	Default	What it does
`swatchsmbk-legend-item--swatch-<value>`	`12345678seriesmuted`	`1`	The series' color: 1 to 8 are the categorical colors in their fixed order, series the one color of a single series, muted the gray for everything else ("Others").

Partssmbk-legend-item__swatchsmbk-legend-item__labelsmbk-legend-item__value

A donut's legend: three products in the first three colors and the rest gathered as Others in the muted gray, each with its value.

Design$1,357
Hosting$1,283
Tools$650
Others$1,794

The eight categorical colors in their fixed order, the series color of a chart with one series, and the muted gray.

First series
Second series
Third series
Fourth series
Fifth series
Sixth series
Seventh series
Eighth series
A chart's one series
Everything else

Names only, for a chart whose values are on its marks or in its table.

Search
Links from other sites
Newsletter
Typed in

Short legends can sit in a row; the page lays the list out.

Used62%
Left38%

A long name wraps; the value keeps its place at the end of the line.

Website rebuild for the spring launch124 h
Brand guidelines38 h

Purpose

Names one series of a chart: a small swatch in the series' color, its name, and its value if the chart shows one. A chart's legend is a list of legend items, one per series, in the chart's order. The name, not the swatch, says which series is which.

When to use

Beside or under a chart with two or more series, to name each one.
With values, as a small table of the chart's parts: a donut's shares, a bar's totals.

When not to use

A chart with one series. Its title names it.
As a control that hides or shows a series. A legend item takes no action.
Without the series also labelled on the chart where eight or fewer are shown, or a table of the values.

Usage rules

Do

Give the series in the chart's order, with the colors in their fixed order: 1 to 8.
Gather everything past the eighth series into one muted item, such as "Others".
Use the same name in the legend as on the chart and in its table.

Don't

Repeat a color for a ninth series.
Use the feedback colors for series; they mean success, warning and danger.

Design$1,357
Hosting$1,283
Tools$650
Travel$420
Support$310
Social$270
Training$190
Legal$140
Others$464

Gather everything past the eighth series into one muted item.

Design$1,357
Hosting$1,283
Tools$650
Travel$420
Support$310
Social$270
Training$190
Legal$140
Events$110

Don't

A ninth series that repeats the first color cannot be told apart from it.

Anatomy

The block, a list item as wide as its list.
The swatch part, a small square in the series' color. Its swatch is one of the eight categorical colors, the series color of a chart with one series, or muted, the gray for everything else.
The label part, the series' name, filling the line.
The value part, the series' value, at the end of the line in the subtle color.

Behavior

The name wraps when the line is too narrow; the value keeps its place at the end. Nothing moves and nothing takes focus.

What it does for you

The swatch is decoration and hidden from screen readers; they hear the name, then the value.
Legend items are list items. Nothing takes focus.
In high contrast mode the swatch keeps its series' color, so it still matches the chart.

What you must do

Put legend items in a list, ul with role="list" where the page removes its bullets, so a screen reader says how many series there are.
Never tell series apart by color alone. Label the series on the chart too, or give the chart a table of its values.

How to test

With a screen reader, the list is announced with its number of items, and each item is read as its name, then its value, with no mention of the swatch.
With text at 200% and the page 320 pixels wide, a long name wraps and the value keeps its place at the end.
In a forced-color mode, each swatch still shows its series' color, matching the chart's marks.

The files the legend item is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

legend-item.css

/* smbk-legend-item — Legend item. Figma "Legend item" 7580:15.
 * One line: a small square swatch in the series' data color, the name filling the line, and the value at its
 * end in the subtle color. A chart's legend is a list of these. The swatch only repeats the color of the
 * series; the name says which series it is. */

.smbk-legend-item {
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
  min-width: 0;
  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);
  text-transform: var(--smbk-typography-body-sm-text-transform);
  list-style: none;
}

.smbk-legend-item__swatch {
  flex: none;
  width: var(--smbk-size-12);
  height: var(--smbk-size-12);
  border-radius: var(--smbk-radius-2);
  background: var(--smbk-color-data-categorical-1);
}

.smbk-legend-item__label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--smbk-color-text-default);
  overflow-wrap: anywhere;
}

.smbk-legend-item__value {
  flex: none;
  color: var(--smbk-color-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* ---- swatch: the series' color ---- */

.smbk-legend-item--swatch-2 .smbk-legend-item__swatch { background: var(--smbk-color-data-categorical-2); }
.smbk-legend-item--swatch-3 .smbk-legend-item__swatch { background: var(--smbk-color-data-categorical-3); }
.smbk-legend-item--swatch-4 .smbk-legend-item__swatch { background: var(--smbk-color-data-categorical-4); }
.smbk-legend-item--swatch-5 .smbk-legend-item__swatch { background: var(--smbk-color-data-categorical-5); }
.smbk-legend-item--swatch-6 .smbk-legend-item__swatch { background: var(--smbk-color-data-categorical-6); }
.smbk-legend-item--swatch-7 .smbk-legend-item__swatch { background: var(--smbk-color-data-categorical-7); }
.smbk-legend-item--swatch-8 .smbk-legend-item__swatch { background: var(--smbk-color-data-categorical-8); }
.smbk-legend-item--swatch-series .smbk-legend-item__swatch { background: var(--smbk-color-data-series); }
.smbk-legend-item--swatch-muted .smbk-legend-item__swatch { background: var(--smbk-color-surface-track); }

/* ---- high contrast (forced colors) ---- */
/* The swatch keeps its series' color, so it still matches the chart's marks. */

@media (forced-colors: active) {
  .smbk-legend-item__swatch {
    forced-color-adjust: none;
  }
}

Tokens it reads

Legend item tokens
Token and CSS	Value	Preview	Foundation
space.inline.sm--smbk-space-inline-sm	comfortable: 6pxcompact: 4pxchanges with density		Spacing
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
size.12--smbk-size-12	12px		Size
radius.2--smbk-radius-2	2px		Radius
color.data.categorical.1--smbk-color-data-categorical-1	light: default: #3b5ce3 · cockpit: #0a85a1dark: default: #7fa0ff · cockpit: #34a2bfchanges with theme		Color
color.text.default--smbk-color-text-default	light: #232527dark: #e7ebf0changes with theme		Color
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
color.data.categorical.2--smbk-color-data-categorical-2	light: default: #da601a · cockpit: #b5771cdark: default: #fa8349 · cockpit: #c28535changes with theme		Color
color.data.categorical.3--smbk-color-data-categorical-3	light: default: #4e555e · cockpit: #8e4170dark: default: #c4cdd8 · cockpit: #a35d85changes with theme		Color
color.data.categorical.4--smbk-color-data-categorical-4	light: default: #269936 · cockpit: #11957cdark: default: #54b85b · cockpit: #3ca88fchanges with theme		Color
color.data.categorical.5--smbk-color-data-categorical-5	light: default: #ae5bf9 · cockpit: #6f59a6dark: default: #dac3f7 · cockpit: #8270b5changes with theme		Color
color.data.categorical.6--smbk-color-data-categorical-6	light: default: #137575 · cockpit: #688e3bdark: default: #1d9393 · cockpit: #7ea059changes with theme		Color
color.data.categorical.7--smbk-color-data-categorical-7	light: default: #968507 · cockpit: #4167addark: default: #968507 · cockpit: #5a7dbc		Color
color.data.categorical.8--smbk-color-data-categorical-8	light: default: #c41883 · cockpit: #a04f27dark: default: #f8bbd7 · cockpit: #b06846changes with theme		Color
color.data.series--smbk-color-data-series	light: default: #3b5ce3 · cockpit: #0a85a1dark: default: #7fa0ff · cockpit: #34a2bfchanges with theme		Color
color.surface.track--smbk-color-surface-track	light: #7c8692dark: #4e555echanges with theme		Color

Manifest

legend-item.manifest.json

{
  "name": "legend-item",
  "block": "smbk-legend-item",
  "summary": "Names one series of a chart: a swatch in its color, its name, and its value if shown. A list of them is the chart's legend.",
  "adapt": "css",
  "axes": {
    "swatch": {
      "values": [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "series",
        "muted"
      ],
      "default": "1",
      "description": "The series' color: 1 to 8 are the categorical colors in their fixed order, series the one color of a single series, muted the gray for everything else (\"Others\")."
    }
  },
  "flags": {},
  "parts": [
    "swatch",
    "label",
    "value"
  ],
  "figmaNodeId": "7580:15"
}

Menu

Customize the preview

Options

Examples

Usage

Every swatch

Without values

In a row

Long names

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Source

Options

Examples

Usage

Every swatch

Without values

In a row

Long names

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Related

Source