Sparkline

Sparkline is a minimal trend line for tables, cards, and dashboards. It uses role="img" with a required summary and respects reduced motion.

Usage

import { Sparkline } from "@komponents/ui";

<Sparkline
  data={[4, 6, 5, 9, 7, 11]}
  summary="Signups over the last six weeks"
/>

States

• loading — skeleton placeholder
• empty — dashed empty message (also when data is empty)
• error — alert message

Accessibility

Provide a concrete summary. Prefer a surrounding visually-hidden data table when the exact values matter.

Preview