Bar list | Surflane

AvailableSemantic HTML / product composition

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

Disk used by directory

models/srv/models412 GiB
cache/var/cache/huggingface168 GiB
datasets/srv/datasets96 GiB
checkpoints/srv/runs/checkpoints73 GiB
docker/var/lib/docker54 GiB
logs/var/log21 GiB
backups/srv/backups14 GiB
tmp/tmp6 GiB

Tokens this week by project

Harbor18.4M
Beacon9.7M
Tideline6.2M
Anchor3.1M
Compass1.4M

Sector return against the market, 20 days

Semiconductors+4.2%p
Banks+1.1%p
Autos-0.6%p
Chemicals-2.8%p
Retail-3.5%p

Usage

Rank named values of one unit, such as disk by directory, tokens by project or calls by tool. Each row reads name, bar and value on one line, with an optional detail such as a path under the name. Bars are in proportion to the largest value, or to max when the values share a limit. Set maxRows to keep a long ranking inside a dashboard card. With diverging, signed values, such as each sector's gap against the market, grow from a center line on one scale: a rise toward the inline end in the trend's up color and a fall toward the start in its down color.

Don't mix units in one list. Rank one measure, and put a second one in its own list or a Table.
Don't use BarList for change over time. Use LineChart or Sparkline.
Don't use BarList for one measurement against its limit. Use Meter.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

div → ol(aria-label) → li: name + detail, bar (aria-hidden), value; with maxRows, ScrollArea(region) around the ol; with diverging, the bar is a DivergingBar track (aria-hidden)

Keyboard and accessibility

BarList is an ordered list of text: each row reads its name, its detail and its value. The bars are decoration. A list bounded by maxRows scrolls in a named region that takes focus, so arrow keys scroll it.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { BarList } from '@surflane/ui'

<BarList
  label='Disk used by directory'
  items={[
    { id: 'models', label: 'models', detail: '/srv/models', value: 412, text: '412 GiB' },
    { id: 'cache', label: 'cache', detail: '/var/cache/hf', value: 168, text: '168 GiB' },
  ]}
  maxRows={6}
/>

Key API

Bar list — common wrapper props
Prop	Contract	Default
`label`	names the list	required
`items`	readonly {id, label, detail?, value, text?}[]; text writes the value, such as "412 GiB"	required
`max`	the value a full bar stands for, or a half bar when diverging	the largest value, or the largest size when diverging
`diverging`	draws signed values from a center line on one scale	false
`trend / lowerIsBetter`	auto \| neutral: a diverging list colors rises and falls, or draws both in the brand mark / swaps the colors where a fall is good	auto / false
`sorted`	orders rows from the largest value down	true
`maxRows`	rows shown before the list scrolls in a named region	every row
`formatValue / locale`	writes a value that has no text / Intl number locale	Intl.NumberFormat

The table lists the common wrapper's main props. See the package type declarations for the full types.