Notion UIMeter
Displays a numeric value within a known range.
Installation
pnpm add @notion-kit/uiAnatomy
Use MeterBar for linear progress and MeterRing for compact circular progress.
Add MeterLabel and MeterValue when the value needs to be announced or displayed inside the meter root.
API Reference
Meter
Meter extends the Base UI Meter root and renders a <div>.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | The current value. |
min | number | 0 | The minimum value. |
max | number | 100 | The maximum value. |
format | Intl.NumberFormatOptions | - | Options used to format the value. |
locale | Intl.LocalesArgument | runtime locale | Locale used by Intl.NumberFormat when formatting the value. |
aria-valuetext | React.AriaAttributes["aria-valuetext"] | - | Human-readable text for the current value. |
getAriaValueText | (formattedValue: string, value: number) => string | - | Returns the human-readable text alternative for the current value. |
MeterBar
MeterBar extends Meter and renders a horizontal track with an indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
trackColor | string | - | CSS color for the indicator. |
MeterRing
MeterRing extends Meter and renders a circular SVG indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
max | number | 100 | The maximum value. |
trackColor | string | - | CSS color for the indicator. |
MeterLabel
MeterLabel extends the Base UI Meter label and renders a <span>.
MeterValue
MeterValue extends the Base UI Meter value and renders a <span>.
| Prop | Type | Default | Description |
|---|---|---|---|
children | null | ((formattedValue: string, value: number) => ReactNode) | - | Custom render function for value. |