Components

Legend

Hue is only allowed in a specimen when something names it. The legend is that name.

Context, subject and comparison

01
02
03
  • Context
  • Subject
  • Comparison

Outcomes

  • Measured
  • Passes
  • Fails

Used on Axes.

Usage and interface

DemoLegend renders ul.ui-legend from items: each { label, tone } becomes a list item with a tone chip and its name. Put it in the tray caption or beside the stage.

<Demo caption={<DemoLegend items={[{ label: 'Subject', tone: 'blue' }, { label: 'Comparison', tone: 'violet' }]} />}>  …</Demo>
<ul class="ui-legend" aria-label="Legend">  <li><i data-tone="blue" aria-hidden="true"></i>Subject</li>  <li><i data-tone="violet" aria-hidden="true"></i>Comparison</li></ul>