Legend

Legend renders a list of labelled swatches with optional values. Use it next to a DonutChart, BarChart, or Sparkline to caption colour mappings.

#Default usage

<Legend
  items={[
    { label: "Stable", value: "62%" },
    { label: "Beta", value: "28%" },
    { label: "Alpha", value: "10%" },
  ]}
/>

#Import

import { Legend } from "@froggdesign/enter-ui-react";

#Accessibility

Legend renders a semantic <ul> of labelled items. Swatches are aria-hidden so screen readers focus on the labels and values.

#API

• items: array of { label, value?, color? } entries.
• orientation: horizontal (default) or vertical.
• Extends ul props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.