IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Legend

/

Design

Visually describe information in a diagram.

A legend acts as a key to identify data represented in a diagram. It always accompanies the chart or graph it is describing and aims to help users identify different symbols, patterns or colors.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Legend API and examples.

Elements

A legend is comprised of an identifier, a label and sometimes a category. It's content is always organized to explain the data on the diagram it accompanies.

Result

Pass

Error

Goal

Runs
IconEffectArrow

Straight

IconEffectFreehand

Loopy

Identifier: The visual indicator that classifies the data it represents.

The identifier should only ever be a color, a pattern or a symbol, like a small icon. It shouldn’t repeat in the legend, since that will likely be confusing as to what statistical data it’s representing.

The identifier label must distinctly describe the specific information it relates to. Be as concise as possible without causing confusion about its meaning.

Category labels are needed in some cases to keep like-items corralled when providing a lot of information. Category labels should only be used when there are three or more items that fit into two groups.

Usage

Size

To keep the information organized in an easy-to-read way, we recommend only ever using a small identifier. The bounding area will follow our size guideline, but the maximum size of the object should be 12 x 12 pixels, so as not to overpower the text.

Don't use medium or large sizes for identifiers.

Don'tuse medium or large sizes for identifiers.

Do use small identifiers to keep it and label vertically aligned.

Douse small identifiers to keep it and label vertically aligned.

Placement

Legends must always accompany a diagram. They can’t float out on their own, and they shouldn’t list information for data that isn’t represented on the chart. Legends should always be placed above the diagram it’s describing.

Don't provide a statistical diagram without a legend.

Don'tprovide a statistical diagram without a legend.

Do include all information represented.

Doinclude all information represented.

Don't list identifiers without labels.

Don'tlist identifiers without labels.

Do write labels clearly and succinctly.

Dowrite labels clearly and succinctly.

Don't provide category labels for individual identifiers.

Don'tprovide category labels for individual identifiers.

Do break up identifiers in groups that make sense.

Dobreak up identifiers in groups that make sense.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconConfirmation PassIconConfirmation Pass

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.