Diagrams
DiagramLegend
The key: which drawn form means which kind of thing.
Ships from@misoto22/design/diagrams
When to reach for it
Not optional furniture in a monochrome system. When a queue and a cache differ by a sigil rather than a colour, this is the only place a reader is told what the sigil means.
Examples
default
Key
States
Notes
The key: which drawn form means which kind of thing.
Not optional furniture in a monochrome system, and this is the one place that has to be said plainly. When the difference between a queue and a cache is a sigil rather than a colour, the key is the only place a reader is told what the sigil means — a figure whose forms are undocumented is a figure whose forms might as well not have been drawn.
A <ul> rather than a row of <span>s: it is a list of pairs, and the count is part of what a screen reader should say about it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| entriesrequired | DiagramLegendEntry[] | — | |
| className | string | — | |
| title | string | null | 'Key' | The kicker before the row. Pass null for a bare row. |
Accessibility
- A list of pairs rather than a row of spans, so the count is part of what a screen reader says about it.
- kindLegend, variantLegend and stateLegend build the standard sets out of the renderers’ own drawing code, so the key can never drift from the figure.