Primitivefeedback

Progress

Stable

Primitive de feedback que mostra o quanto uma tarefa já avançou. Composto sobre Base UI Progress, é um progressbar e não um medidor: o valor caminha para um fim. Nome e valor são o que a barra não consegue mostrar sozinha, então o rótulo é ligado automaticamente, o valor é falado na unidade da tarefa e o estado indeterminado (value={null}) preenche a trilha em intensidade menor, para não se passar por vazio nem por concluído.

Instalação

npx up-web-ds add progress

Preview

Basic

Enviando arquivos

Without Visible Label

relatorio-anual.pdf

Indeterminate

Validando o registry

Custom Range

Aulas concluídas

States

Não iniciado

Em progresso

Concluído

All states

Basic

Enviando arquivos

Without Visible Label

relatorio-anual.pdf

Indeterminate

Validando o registry

Custom Range

Aulas concluídas

States

Não iniciado

Em progresso

Concluído

Usage

@/components/ui/progress

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from '@/components/ui/progress'

Progress

1
2
3
4<Progress value={40}>
  <ProgressLabel>Enviando arquivos</ProgressLabel>
  <ProgressValue />
</Progress>

Props

Progress

Props de Progress
Prop	Type	Default	Description
value, obrigatória	`number \| null`	sem valor padrão	The current value. The component is indeterminate when value is `null`.
aria-valuetext	`string`	sem valor padrão	A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar.
className	`string \| ((state: ProgressRootState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
format	`Intl.NumberFormatOptions`	sem valor padrão	Options to format the value.
getAriaValueText	`((formattedValue: string, value: number \| null) => string)`	`describeValue`	Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
locale	`Intl.LocalesArgument`	sem valor padrão	The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale.
max	`number`	`100`	The maximum value.
min	`number`	`0`	The minimum value.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ProgressRootState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ProgressRootState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ProgressPrimitive.Root.Props. Aceita também os atributos padrão de um elemento React (274 não listados).

ProgressTrack

Props de ProgressTrack
Prop	Type	Default	Description
className	`string \| ((state: ProgressTrackState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ProgressTrackState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ProgressTrackState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ProgressPrimitive.Track.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

ProgressIndicator

Props de ProgressIndicator
Prop	Type	Default	Description
className	`string \| ((state: ProgressIndicatorState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ProgressIndicatorState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ProgressIndicatorState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ProgressPrimitive.Indicator.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

ProgressLabel

Props de ProgressLabel
Prop	Type	Default	Description
className	`string \| ((state: ProgressLabelState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ProgressLabelState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ProgressLabelState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ProgressPrimitive.Label.Props. Aceita também os atributos padrão de um elemento React (275 não listados).

ProgressValue

Props de ProgressValue
Prop	Type	Default	Description
children	`((formattedValue: string \| null, value: number \| null) => React.ReactNode) \| null`	sem valor padrão
className	`string \| ((state: ProgressValueState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ProgressValueState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ProgressValueState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende ProgressPrimitive.Value.Props. Aceita também os atributos padrão de um elemento React (274 não listados).

prop obrigatória.

Composition

Rótulo e leitura são filhos opcionais do Progress, desenhados acima da trilha; a trilha e o preenchimento são do próprio Progress e não precisam ser compostos.

Composição de Progress

Progress

ProgressLabel
ProgressValue

Metadata

Notas de acessibilidade

Teclado verificado por teste: a barra não é interativa e fica fora da sequência de tabulação — um progresso que recebesse foco seria uma parada que não faz nada. Leitor de tela verificado por teste: o papel é progressbar, o nome vem do ProgressLabel ligado pelo Base UI sem id escrito no exemplo, ou de aria-label quando não há espaço para rótulo; aria-valuemin, aria-valuemax e aria-valuenow acompanham o valor, e aria-valuetext o fala na unidade da tarefa ("7 de 12 aulas" num intervalo próprio). No estado indeterminado não há aria-valuenow e o texto falado é "Em andamento" — o padrão do Base UI era o inglês "indeterminate progress". O ProgressValue é aria-hidden de propósito: o valor já viaja na barra, e lido duas vezes é ruído. Touch verificado em viewport de 375px com emulação de toque: não há alvo interativo a medir, e a barra ocupa a largura disponível sem empurrar a página para rolagem horizontal. Reduced motion verificado em navegador com prefers-reduced-motion: reduce, com duas políticas: a transição de largura acompanha um valor que já é verdade, então sai o tween e a barra salta para o comprimento certo (motion-reduce:transition-none) — o comprimento é o estado e nunca é retido; o pulso do indeterminado é ambiente e fica atrás de motion-safe:, então não roda, enquanto a barra tingida em largura total continua carregando o estado.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: feedback
Status: Stable

Origem e distribuição

Fonte: shadcn registry / progress
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/progress.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: @base-ui/react
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda