# Meter

> Thinner progress bar.

Source: https://ui.jcsoftdev.com/docs/components/meter

Thinner progress bar.

## Import

```ts
import { Meter } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/progress`.

## Usage

```tsx
<Meter value={60} max={100} aria-label="Meta de ingresos del día" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` * | `number` |  |  |
| `max` | `number` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/atoms-progress--default)
- [Empty](/storybook/?path=/story/atoms-progress--empty)
- [Complete](/storybook/?path=/story/atoms-progress--complete)
- [Custom Max](/storybook/?path=/story/atoms-progress--custom-max)
- [Thin Meter](/storybook/?path=/story/atoms-progress--thin-meter)
- [Comparison](/storybook/?path=/story/atoms-progress--comparison)

## Source

`packages/ui/src/atoms/progress/progress.tsx`