Hatched Bar
Distinguish pending, projected or baseline amounts from settled values with hatching.
import { Hatch, HatchedBar } from '@youj/react'
Installation & usage
npm i @youj/reactFor an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.
A hatch says "not settled": a baseline to compare against, an amount that's pending, projected or reserved, a run that missed its gate. HatchedBar is a bar of it that grows to a value, and Hatch is the fill on its own, for legend swatches and for a pending segment inside another bar. Keep solid for the actual amount beside it, so the two read as a pair.
import { Hatch, HatchedBar } from '@youj/react'
<HatchedBar value={0.64} className="h-32 w-6" label="Projected usage" />
<HatchedBar value={0.72} fill="solid" tone="accent" orientation="horizontal" />
<Hatch className="size-3" />value is out of max (default 1). A bar grows up from the bottom, or from the inline start when orientation="horizontal"; size it with classes. fill="solid" draws the settled amount: in neutral tone that's a quiet fill, so a colored bar beside it stands out. The hatch is diagonal stripes of the tone over a faint wash of it, so it follows the theme in both modes.
Description
Pass-rate bars for a run of builds: those under the gate are hatched, the latest is highlighted, and a dashed line marks the gate.
A quota bar whose last segment is hatched to show what a cleanup will free.
Hatch fills whatever box you give it, so a stacked bar can end in what a job is about to free, or what a forecast adds.
Code
hatched-bar-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propsvalue, max, fill… (8)
Props
| Prop | Type | |
|---|---|---|
valueRequired | numberThe bar's length, out of | – |
max | numberdefault 1 | 1 |
fill | 'hatched' | 'solid'Hatched for a baseline, pending or projected amount; solid for an actual one. default 'hatched' | 'hatched' |
orientation | 'vertical' | 'horizontal'Horizontal grows from the inline start. default 'vertical' | 'vertical' |
tone | HatchTone'accent''neutral''success''warning''danger''chart-1''chart-2''chart-3''chart-4''chart-5'default 'neutral' | 'neutral' |
label | stringAccessible name. With it the bar is a | – |
valueText | stringThe value as spoken. Default: the share of | – |
Other props pass through: extends ComponentProps<'div'>. | ||
| Prop | Type | |
|---|---|---|
tone | HatchTone'accent''neutral''success''warning''danger''chart-1''chart-2''chart-3''chart-4''chart-5'The stripes' color. default 'neutral' | 'neutral' |
Other props pass through: extends ComponentProps<'span'>. | ||
MotionGrow, new value · reduced motion
Motion
| Moment | Tokens | ||
|---|---|---|---|
| Growfrom its base when a third of it scrolls into view, once; a clip, so the stripes never stretch | spring.smooth0.36s, bounce 0 | 0.36s, bounce 0 | |
| New valueretargets from where it is | spring.smooth0.36s, bounce 0 | 0.36s, bounce 0 |
Reduced motion
Drawn at its value; a new value jumps.
Reduced motion
Bars are drawn at their value, and changes land at once.
AccessibilityLabels and assistive technology
Accessibility
- With
labelthe bar is ameterwith its orientation, and speaks its share ofmaxas a percentage (or yourvalueText). Without, it's hidden from assistive technology. Hatchis always decorative: say what it marks in a legend or in the text beside it.- A pattern is not a color, so hatched and solid stay apart in grayscale and for color-blind readers.