Legend

Every legend group contains at least one legend item. Each legend item is made up of two parts: a visual identifier and a label. Legend items may either be Small or Large.

1. Visual identifier
2. Label

The visual identifier is a container that can display a variety of visual styles. An identifier may use any unique token, color, stroke, fill, pattern, or shape, or may display an icon. The label describes the meaning of visual style mocked up within the visual identifier.

While legend labels may contain abbreviations, they should never truncate. Whenever a legend group is not swipeable and one of its items would extend into the margin, the group should wrap to more lines.

Small

1. 8px visual identifier
2. Label — Caption scaled to 8pt font size

Small legend items have a more subtle profile than their larger counterparts. This size is best used when there is not a lot of similarity between the various styles described by the group. Note: the small legend item does not use a type scale style so it should be avoided whenever possible. While it is not ideal, it will certainly be necessary in some scenarios.

Large

1. 12px visual identifier (Iris icon shown above)
2. Label — Caption

Large legend items dominate the interface hierarchy more than their smaller counterparts. This size is best used when the differences between the styles described by the group are harder to perceive.

Legend groups

Legend groups are the organizing structure of legend items. They may contain one or more legend items. Legend groups may be horizontally scrollable or wrap at a width determined by the parent container. When a legend group has a set width, its contents should begin to wrap so that the labels never truncate. 

Alignment

Legend groups may left-align or center-align the rows they contain. The alignment should be set to match the surrounding content

Legends may be placed below, above, or beside, the visualizations they describe.