Bar blocks | Sodium design system

Sizes

Rows by source, last sync
Orders DB: 1.2M, 56% of the total
Event stream: 612K, 27% of the total
File exports: 287K, 13% of the total
Webhooks: 94K, 4% of the total
sm
Rows by source, last sync
Orders DB: 1.2M, 56% of the total
Event stream: 612K, 27% of the total
File exports: 287K, 13% of the total
Webhooks: 94K, 4% of the total
defaultdefault
Rows, last sync
Loaded: 48K, 87% of the total
Skipped: 6.9K, 13% of the total
lg

Rows, last sync
Loaded: 48K, 87% of the total
Skipped: 6.9K, 13% of the total
two
Rows by source, last sync
Orders DB: 1.2M, 56% of the total
Event stream: 612K, 27% of the total
File exports: 287K, 13% of the total
Webhooks: 94K, 4% of the total
fourdefault
Rows by outcome, last sync
Loaded: 48K, 84% of the total
Deduplicated: 6.9K, 12% of the total
Rejected: 2.4K, 4% of the total
status

When to use it

Use: A total split into two to six named parts read by number and by size: rows by source, storage by tier.
Use: The headline split of a panel, where each part's number should be on the page.
Not for: Numbers over time. Use Chart.
Not for: One value per period. Use Stem chart.
Not for: Parts that do not add up to one whole; widths would claim shares that are not there.

6 rules

Must: Put the part that matters first: it takes the yellow wash, and the rest sit on the well. Because the first block is the one the eye lands on and the only yellow, so a minor part first spends it on the wrong thing.
Must: Pass parts of one whole only, all in one unit and none negative. Because a block's width is its share of the sum, so parts that overlap or differ in unit draw shares that do not exist.
Must: Keep it to two to six parts, and to four at phone width; group the rest as Other. Because each block has a floor so its number and name fit, and six floors are wider than a phone.
Must: Set tone: 'fail', 'warn' or 'ok' only on a part that is that outcome, named so. Because the tint is a state, and Rejected in red reads at a glance where a red Event stream block reads as a fault.
Must: Pass unit (count, bytes or duration) when a value passes five characters, so every number fits its block. Because the number is the truth and the width only the impression, so a number cut off by its block loses the part.
Never: Give a block a solid fill, its own colour or its own edge through className; pass tone, and every block keeps a light fill, text-1 and the one --line edge. Because tone is a quiet fill and a word, every fill is checked for 4.5:1 text in both themes, a solid slab of yellow or ink outshouts the panel it sits in, and a coloured edge is a second code the reader has to learn.

3 checks

: It is a figure with a list; each part reads its name, its value and its share ("Orders DB: 1.2M, 56% of the total").
: The printed number and the turned name are hidden from a screen reader, so each part is heard once.
: Text is text-1 on every plain tone and clears 4.5:1 in both themes: 16.5:1 on the yellow wash and 16.4:1 on the well in light, 11.7:1 and 14.5:1 in dark.

7 edge cases

Tiny part: Its block keeps a floor wide enough for its number, so widths stop being exact shares below it.
Zero or negative part: Left out; the empty state shows when nothing is left.
Long name: The turned name truncates up the block's height.
Narrow width: Four default blocks fit 390px; more overflow, so group them as Other.
Dark theme: The lead block takes the dark yellow wash and the rest the dark well, all with near-white text under the same --line edge.
Right to left: Blocks run from the right and wipe in from there.
Reduced motion: All blocks are there at once.

5 props

label: string
data: {label: string; value: number; tone?: BarBlockTone}[]
size: 'sm' | 'default' | 'lg' default 'default'
unit, valueFormat: 'count' | 'bytes' | 'duration', (v: number) => string default exact
empty: ReactNode

9 tokens