AppProgress

Átomos

Indicador de progresso para uma tarefa, meta ou processamento mensurável.

Quando usar: há um valor atual e um máximo conhecidos, como envio de arquivo ou avaliações concluídas.

Quando não usar: a duração é indeterminada; nesse caso, use um indicador de carregamento.

Importar

import { AppProgress } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppProgress.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppProgress.css';

Exemplos

Default

const Default = () => <AppProgress value={60} aria-label="Progresso da tarefa" showValue />;

Estilo Navy

const EstiloNavy = () => <AppProgress value={60} aria-label="Utilização" showValue />;

Estilo Success Com Rotulo

const EstiloSuccessComRotulo = () => <AppProgress
    value={45}
    aria-label="Progresso da tarefa"
    showValue
    max={70}
    label="45/70 avaliações"
    icon={<IconCheckCircle />}
    tone="success"
    size="sm" />;

Estilo Success Com Valor

const EstiloSuccessComValor = () => <AppProgress
    value={6}
    aria-label="Progresso da tarefa"
    showValue
    max={10}
    label="05/10"
    icon={<IconCheckCircle size={20} />}
    tone="success" />;

Primary

const Primary = () => <AppProgress value={70} aria-label="Progresso da campanha" showValue tone="primary" />;

Props

Prop	Tipo	Padrão	Descrição
`value`*	`number`	`—`	Valor atual, limitado visualmente e semanticamente ao intervalo de `0` a `max`.
`aria-label`	`string`	`—`	Nome acessível obrigatório quando não há `label`.
`icon`	`ReactNode`	`—`	Ícone decorativo exibido antes do rótulo.
`label`	`ReactNode`	`—`	Texto exibido acima da barra e usado como nome acessível.
`max`	`number`	`100`	Maior valor possível. Padrão: `100`.
`showValue`	`boolean`	`false`	Exibe a porcentagem calculada à direita da barra.
`size`	`"sm" \| "md"`	`md`	Altura da barra. Padrão: `md`.
`tone`	`"success" \| "navy" \| "primary"`	`navy`	Cor do preenchimento. Padrão: `navy`.