Meter.mdx

import {Layout} from '../../src/Layout'; export default Layout;

import docs from 'docs:react-aria-components'; import {Meter as VanillaMeter} from 'vanilla-starter/Meter'; import {ProgressCircle as VanillaProgressCircle} from 'vanilla-starter/ProgressCircle'; import {Meter as TailwindMeter} from 'tailwind-starter/Meter'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/meter/docs/anatomy.svg';

export const tags = ['gauge', 'progress', 'level'];

Meter

{docs.exports.Meter.description}

Value

By default, the value prop is a percentage between 0 and 100. Use the minValue, and maxValue props to set a custom value scale.

<VisualExample component={VanillaMeter} docs={docs.exports.Meter} links={docs.links} props={['minValue', 'maxValue']} initialProps={{ label: 'Data usage', minValue: 0, maxValue: 500, value: 250, formatOptions: { style: 'unit', unit: 'megabyte' } }} />

API

<Meter>
  <Label />
</Meter>

Meter