Mini Bar List
Compare a short list of values with compact bars.
Preview
Import
import { MiniBarList } from "@sigil-ui/components";Usage
<MiniBarList
valueLabel="Views"
items={[
{ label: "/docs/getting-started", value: 4230 },
{ label: "/docs/components/button", value: 3150 },
{ label: "/docs/theming", value: 2840 },
{ label: "/docs/diagrams/flow-diagram", value: 1920 },
{ label: "/docs/installation", value: 1480 },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | MiniBarItem[] | — | — |
valueLabel | string | Count | Value label (shown in header). |
formatValue | (v: number) => string | — | Format value for display. |
color | string | — | Color for all bars if not set per-item. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-text-muted | Text muted |
--s-primary | Primary |
--s-radius-sm | Radius sm |
--s-text | Text |
--s-font-mono | Font mono |