Mini Bar List
A horizontal bar ranking list for top-N analytics, page views, and leaderboards.
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 },
]}
color="var(--s-primary)"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | MiniBarItem[] | — | Ranked items with label, value, optional icon and color |
valueLabel | string | "Count" | Column header for the value column |
formatValue | (v: number) => string | — | Custom value formatter function |
color | string | var(--s-primary) | Default bar background color |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Default bar background |
--s-text | Item label and value text |
--s-text-muted | Column headers and icons |
--s-font-mono | Value font family |
--s-radius-sm | Bar corner radius |