Meter

Representa uma medição escalar dentro de um intervalo conhecido com `mk-meter`.

O mk-meter representa uma medição escalar dentro de um intervalo conhecido — uso de disco, nível de bateria, cota de API. É análogo ao elemento HTML nativo <meter> e usa role="meter". Nunca é indeterminado e expõe variantes semânticas para comunicar o significado da leitura. Componente display-only, sem interação.

Padrão

Estado padrão: variante info, layout stacked, tamanho md, com label, valor percentual e helper text.

import { MkMeter } from '@db1/makuco-ui-react';

<MkMeter value={65} label="Uso de disco" helperText="6,5 GB de 10 GB utilizados" />

<mk-meter value="65" label="Uso de disco" helper-text="6,5 GB de 10 GB utilizados"></mk-meter>

Variantes

Use variant para comunicar o significado semântico da leitura via cor do fill.

import { MkMeter } from '@db1/makuco-ui-react';

<MkMeter value={65} variant="info" label="Info (padrão)" />
<MkMeter value={65} variant="success" label="Success — dentro do esperado" />
<MkMeter value={78} variant="warning" label="Warning — atenção" />
<MkMeter value={92} variant="danger" label="Danger — crítico" />

<mk-meter value="65" variant="info" label="Info (padrão)"></mk-meter>
<mk-meter value="65" variant="success" label="Success — dentro do esperado"></mk-meter>
<mk-meter value="78" variant="warning" label="Warning — atenção"></mk-meter>
<mk-meter value="92" variant="danger" label="Danger — crítico"></mk-meter>

Tamanhos

size="sm" reduz a altura da trilha de 8 px para 4 px e remove o arredondamento. Use em contextos compactos.

import { MkMeter } from '@db1/makuco-ui-react';

<MkMeter value={65} size="md" label="Tamanho md (padrão)" />
<MkMeter value={65} size="sm" label="Tamanho sm" />

<mk-meter value="65" size="md" label="Tamanho md (padrão)"></mk-meter>
<mk-meter value="65" size="sm" label="Tamanho sm"></mk-meter>

Layout inline

layout="inline" coloca label, trilha e valor em uma única linha horizontal — ideal para listas compactas de métricas. O helperText é ignorado neste layout.

import { MkMeter } from '@db1/makuco-ui-react';

<MkMeter value={30} layout="inline" label="CPU" variant="info" />
<MkMeter value={72} layout="inline" label="Memória" variant="warning" />
<MkMeter value={91} layout="inline" label="Disco" variant="danger" />

<mk-meter value="30" layout="inline" label="CPU" variant="info"></mk-meter>
<mk-meter value="72" layout="inline" label="Memória" variant="warning"></mk-meter>
<mk-meter value="91" layout="inline" label="Disco" variant="danger"></mk-meter>

Com unidade

A prop unit formata o valor via Intl.NumberFormat e concatena a unidade — cobre a maioria dos casos de uso numérico.

import { MkMeter } from '@db1/makuco-ui-react';

<MkMeter value={1.5} max={10} unit="GB" label="Armazenamento" />

<mk-meter value="1.5" max="10" unit="GB" label="Armazenamento"></mk-meter>

Rótulo de valor customizado

valueLabel substitui completamente o texto exibido e o aria-valuetext. Use quando a formatação automática não é suficiente.

import { MkMeter } from '@db1/makuco-ui-react';

<MkMeter value={7} max={10} valueLabel="7 de 10 tarefas" label="Progresso" />

<mk-meter value="7" max="10" value-label="7 de 10 tarefas" label="Progresso"></mk-meter>

Props — mk-meter

Prop	Tipo	Padrão	Descrição
`value`	`number`	`0`	Valor atual da medição. Clampado internamente ao intervalo `[min, max]`.
`min`	`number`	`0`	Limite inferior da escala.
`max`	`number`	`100`	Limite superior da escala. Deve ser maior que `min`.
`variant`	`"info" \| "warning" \| "danger" \| "success"`	`"info"`	Cor semântica do fill.
`size`	`"sm" \| "md"`	`"md"`	Altura da trilha: `sm` = 4 px (sem raio), `md` = 8 px (raio 2 px).
`layout`	`"stacked" \| "inline"`	`"stacked"`	`stacked` empilha verticalmente. `inline` coloca label, trilha e valor em uma linha.
`label`	`string`	—	Texto descritivo exibido acima (`stacked`) ou à esquerda (`inline`). Também popula `aria-label` automaticamente.
`helperText`	`string`	—	Texto de apoio abaixo da trilha. Apenas em `layout="stacked"` — ignorado silenciosamente em `inline`.
`showValue`	`boolean`	`true`	Exibe ou oculta o valor textual calculado.
`unit`	`string`	—	Unidade de medida. O valor exibido torna-se `"{valor formatado} {unit}"`. Sobrescrito por `valueLabel`.
`valueLabel`	`string`	—	Override completo do texto exibido e do `aria-valuetext`. Sobrescreve `unit`.

Acessibilidade

O host recebe role="meter" — papel WAI-ARIA correto para medições estáticas (distinto de progressbar, que é para operações em andamento).
aria-valuenow reflete o valor clampado ao intervalo [min, max].
aria-valuemin e aria-valuemax refletem min e max.
aria-valuetext expõe o valor em formato legível por tecnologias assistivas — essencial quando o valor não é um percentual intuitivo (ex.: "1,5 GB" em vez de "15%").
aria-label é definido automaticamente a partir de label quando não há aria-labelledby externo.
O componente nunca recebe foco e não responde a teclado — é estritamente display-only.
A transição do fill respeita prefers-reduced-motion.

Meter

On this page