import { MiniBar } from "@nodus/design-system/finance"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
valuereq | number | — | Current value |
max | number | 100 | Maximum value |
width | string | "80px" | Width of the bar track |
showLabel | boolean | — | Show percentage label after the bar |
severityColored | boolean | — | Color the bar by severity thresholds |
breakpoints | ThresholdBreakpoints | — | Custom severity breakpoints for the ratio |
color | string | — | Fixed bar color (overrides severity) |
label | string | — | Accessible label |
valuerequiredType
numberDefault —Current value
maxType
numberDefault 100Maximum value
widthType
stringDefault "80px"Width of the bar track
showLabelType
booleanDefault —Show percentage label after the bar
severityColoredType
booleanDefault —Color the bar by severity thresholds
breakpointsType
ThresholdBreakpointsDefault —Custom severity breakpoints for the ratio
colorType
stringDefault —Fixed bar color (overrides severity)
labelType
stringDefault —Accessible label
MobileWorks As-Is
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?