Legend

Explore every variant and expand each example’s formatted usage code.

Legend

Explain colors, states and marker styles with compact legend items.

Legend

Working dayNon-workingExceptionInherited

<Legend
  label="Calendar legend"
  items={[
    { id: 'working', label: 'Working day', marker: 'outline' },
    {
      id: 'closed',
      label: 'Non-working',
      color: 'var(--rv-ui-text-muted)',
    },
    { id: 'exception', label: 'Exception', tone: 'selected' },
    { id: 'inherited', label: 'Inherited', marker: 'dashed' },
  ]}
/>

API reference

Explore the complete contracts and inspect complex types.