SplitBar

A bar divided between two parties, each sized by its share.

Overview

Two sides of one total: a pot split between two goals, for and against.

Parties

Do
Debt 35%Renos 65%
import { Caption, Cluster, SplitBar, Stack } from "@hackcove/ui";

<Stack gap="xs">
  <SplitBar a={35} b={65} label="Pot split" names={["Debt", "Renos"]} />
  <Cluster justify="between">
    <Caption>Debt 35%</Caption>
    <Caption>Renos 65%</Caption>
  </Cluster>
</Stack>
Give names so a screen reader hears whose share is whose, and draw the names under the bar for everyone else.
Don't
import { SplitBar } from "@hackcove/ui";

<SplitBar a={35} b={65} label="Pot split" />
No names and nothing under the bar: the two colours are never explained, and a screen reader hears two bare percentages.

Usage

  • a is the left party and b the right; each is sized by its share of a + b.
  • Give names as [left, right], and draw the same names under the bar yourself; the bar draws no text.
  • toneA defaults to negative and toneB to positive. Set both when neither side is good or bad, e.g. accent and warn. size is sm, md or lg (default).
  • More than two parts are a StackedBar; progress toward a total is a ProgressBar.

Accessibility

  • A SplitBar has role="img" and an aria-label of label followed by each side's whole percent.
  • With names it hears each name before its percent; without, only two bare percentages.
  • Colour alone does not name the parties, so draw their names under the bar.

API

SplitBar

A bar split between two parties, a on the left and b on the right, each sized by its share of a + b. label names the split for a screen reader, which hears both percentages; give names (left, right) so it hears whose is whose. Put the parties' names under the bar yourself.

a required
Type
number
b required
Type
number
label required
Type
string
names

The left and right parties, spoken before their percentages.

Type
readonly [string, string]
size

Defaults to "lg".

Type
"sm" | "md" | "lg"
Default
lg
toneA

Defaults to "negative".

Type
"positive" | "warn" | "accent" | "negative"
Default
negative
toneB

Defaults to "positive".

Type
"positive" | "warn" | "accent" | "negative"
Default
positive