Segmented Spend Bar
Proportional spend segments with optional Other-merge for narrow slices.
Size
default
thick
Highlight
Hover segments to drive highlightedKey for list linking.
Hover a segment — highlightedKey: Scott
Other merge
minSegmentWidthPx rolls narrow slices into SEGMENTED_SPEND_OTHER_KEY.
Merged keys (__segmented_other__): none
Inset skeleton
Developer
import { SegmentedSpendBar } from "@financial-tracking/design-system"API reference
| Prop | Type | Default |
|---|---|---|
partsRequired. { key, amount, color }. | SegmentedSpendPart[] | — |
totalRequired sum for widths. | number | — |
size | "default" | "thick" | "default" |
insetHorizontalAlign track with inset list rows. | boolean | false |
highlightedKeyDims non-matching segments. | string | null | — |
onHighlightChange | (key: string | null) => void | — |
minSegmentWidthPxMerge sub-threshold slices into Other. | number | — |
onOtherMembersChange | (keys: readonly string[]) => void | — |