Componentes

Progress

beta

Progresso que se pode medir. Se você não sabe a porcentagem, não é progresso — é espera, e aí o componente é outro.

Ainda não é estável porque Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/progress

Orientação

Progresso que se pode medir. Se você não sabe a porcentagem, não é progresso: é espera, e aí o componente é o Spinner ou o Skeleton.

Quando usar

Existe um total conhecido e uma parte concluída: envio de arquivo, etapas de um plano, conclusão de trilha.
O número em si informa a decisão do usuário — quanto falta, vale a pena esperar.
O valor avança de verdade; barra que anda sozinha sem relação com o trabalho é decoração.

Quando não usar

Para espera de duração desconhecida — Spinner dentro do controle, Skeleton para a tela.
Para representar uma nota ou avaliação: isso é Indicator Rating.
Para etapa de funil comercial, que tem componente próprio e graduação de tom com significado.

Playground

Progresso do aluno na trilha

Valorvalue

Tomtone

Rótulochildren

Indeterminadodemonstração

<Progress value={50}>
  <ProgressLabel>Progresso do aluno na trilha</ProgressLabel>
  <ProgressValue />
</Progress>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.

Progress
  └─ ProgressLabel
  └─ ProgressValue

Exportadas, mas sem demonstração nesta página: ProgressIndicator, ProgressTrack.

Uso

Progresso que se pode medir, com valor real. Se você não sabe a porcentagem, isto não é o componente certo — use Spinner.

Com rótulo e valor

`ProgressLabel` e `ProgressValue` são filhos do `Progress` — ele já cuida do layout entre os dois e a barra.

Trilha de fonoarticulação

`tone="default"` é o primitivo genérico — upload, checklist de implantação. `tone="evolution"` é reservado para progresso do aluno ou conclusão de trilha, o mesmo teal que a marca usa para feedback positivo.

Upload do laudo

Progresso do aluno na trilha

Indeterminado

`value={null}` deixa a barra em estado indeterminado — use quando a operação está em curso mas ainda não existe uma fração conhecida do total.

Sincronizando turmas

Acessibilidade

O que o componente já garante, e o que continua sendo responsabilidade da tela.

A barra precisa de nome acessível. O sensor registrou aria-progressbar-name em quatro rotas desta biblioteca: sem rótulo, o leitor de tela anuncia um número sem dizer do quê.
O valor precisa estar disponível como texto, não só como largura de uma barra.
Progresso que trava precisa dizer que travou; barra parada é indistinguível de barra lenta.

Em contexto de produto

Onde isto aparece numa tela real da Vox Mente, e não numa vitrine.

No painel do professor e no registro de turma, a barra mostra o avanço de cada turma — com o número ao lado, porque a largura sozinha não informa.

Ver o painel do professor

Componentes relacionados

Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Progress

Prop	Tipo	Padrão
tone	"default" \| "evolution" \| null	"default"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

ProgressIndicator

Prop	Tipo	Padrão
tone	"default" \| "evolution" \| null	"default"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

ProgressLabel, ProgressTrack, ProgressValue não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Origem do dado

Orientação, acessibilidade e relacionados: documentação
Anatomia: exemplo desta página
Demonstrações e playground: componente real de @voxmente/ui
Referência da API: TypeScript do pacote
Cor, espaçamento e raio das demonstrações: tokens de theme.css