Small labelled-swatch list used to caption charts and dashboards.
Legend renders a list of labelled swatches with optional values. Its larger, softly rounded swatches follow the shared blue and aqua chart palette. Use it next to a DonutChart, BarChart, or Sparkline to caption colour mappings.
Horizontal layout pairs colour with label and optional value.
<Legend
items={[
{ label: "Stable", value: "62%" },
{ label: "Beta", value: "28%" },
{ label: "Alpha", value: "10%" },
]}
/>import { Legend } from "@froggdesign/enter-ui-react";A segmented donut and share bars use matching series colors.
Legend renders a semantic <ul> of labelled items. Swatches are aria-hidden so screen readers focus on the labels and values.
variant: default (swatches) or bars (full-width share rows using the segmented donut palette).
items[].share: numeric percentage of the whole; bars clamp to 0–100 and treat non-finite values as zero. Supply value for the visible percentage. Decorative bars are hidden from screen readers.
items: array of { label, value?, color? } entries.
orientation: horizontal (default) or vertical.
Extends ul props.
Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.