# BarList

> Names ranked by a value — a label, the value and a thin bar per row.

- **Level**: molecule · **Status**: stable · **Role**: content
- **Import**: `import { BarList } from "@rrios-forge/ui/molecules/bar-list";`
- **Source**: `packages/ui/src/molecules/bar-list`

Compare magnitude when the categories are names: each row is its label and its value, and the bar shows the size. Text first — the list reads without the bars. One list is one series, so every bar wears the same slot; values use tabular numerals; bars grow from one baseline and do not animate in.

## Use it for

- Names ranked by a value (top pages, products) → `BarList`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-molecules-barlist--playground) · frame: `/iframe.html?id=components-molecules-barlist--playground&viewMode=story`
- [Sizes](/?path=/story/components-molecules-barlist--sizes) · frame: `/iframe.html?id=components-molecules-barlist--sizes&viewMode=story`
- [With links](/?path=/story/components-molecules-barlist--with-links) · frame: `/iframe.html?id=components-molecules-barlist--with-links&viewMode=story`
- [In a Card](/?path=/story/components-molecules-barlist--in-a-card) · frame: `/iframe.html?id=components-molecules-barlist--in-a-card&viewMode=story`

## Decisions that name it

- ADR-036 — Data visualization: colour roles, a grammar, and three components on plain SVG

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).