Progress Tracker

Barra horizontal de etapas com status individual para rastrear o progresso em processos lineares. Diferente do Stepper (vertical, orientado a wizard), o progress tracker é um indicador de estado compacto e não interativo. Dark mode automático via variáveis semânticas.

components/progress-tracker.cssAbrir no Figma

Uso

Quando e como utilizar cada variante do progress tracker de acordo com o contexto.

Completed — Etapa já finalizada pelo sistema ou pelo usuário.
Current — Etapa em execução no momento presente.
Error — Etapa que falhou e requer atenção ou correção.
Disabled — Etapa não disponível no fluxo atual.
Compact — Exibição sem labels, para espaços reduzidos.
Small — Versão reduzida para uso em tabelas ou sidebars.

Use o progress tracker para exibir o andamento de processos já iniciados pelo sistema (ex: tramitação de documento, estágios de aprovação). Para fluxos de wizard em que o usuário navega entre etapas, use o Stepper.

Exemplos

Veja abaixo os exemplos interativos do progress tracker com todos os seus estados.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descrição
Container	`.progress-tracker`	Flex row que distribui as etapas horizontalmente
Etapa	`.progress-tracker__step`	Wrapper de marker + label; recebe o modificador de estado
Marker	`.progress-tracker__marker`	Círculo 32px com número ou ícone de check
Label	`.progress-tracker__label`	Texto descritivo da etapa, Inter 12px w500, abaixo do marker
Conector	`.progress-tracker__connector`	Linha 2px que conecta os markers entre etapas adjacentes

Propriedades

Classes e modificadores disponíveis para configurar o progress tracker.

Propriedade	Tipo	Default	Descrição
`.progress-tracker`	`classe`	—	Container principal do progress tracker.
`.progress-tracker__step`	`classe`	—	Etapa individual do rastreador.
`.progress-tracker__marker`	`classe`	—	Indicador circular da etapa (número ou ícone).
`.progress-tracker__label`	`classe`	—	Texto descritivo posicionado abaixo do marker.
`.progress-tracker__connector`	`classe`	—	Linha horizontal que conecta etapas adjacentes.
`.progress-tracker__step--completed`	`classe`	—	Etapa concluída (marker preenchido, conector ativo).
`.progress-tracker__step--current`	`classe`	—	Etapa atual em andamento (marker com destaque brand).
`.progress-tracker__step--error`	`classe`	—	Etapa com erro ou falha de validação.
`.progress-tracker__step--disabled`	`classe`	—	Etapa desabilitada, não acessível.
`.progress-tracker--compact`	`classe`	—	Variante compacta sem label de texto.
`.progress-tracker--sm`	`classe`	—	Tamanho reduzido: marker 24px, label 11px.

Código

Snippets prontos para copiar e usar no seu projeto.

Básico com estados

html

<div class="progress-tracker">
  <div class="progress-tracker__step progress-tracker__step--completed">
    <div class="progress-tracker__marker">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
        viewBox="0 0 48 48" fill="none" stroke="currentColor"
        stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M16 24L22 30L34 18"/>
      </svg>
    </div>
    <span class="progress-tracker__label">Recebido</span>
  </div>
  <div class="progress-tracker__connector progress-tracker__connector--completed"></div>

  <div class="progress-tracker__step progress-tracker__step--current">
    <div class="progress-tracker__marker">2</div>
    <span class="progress-tracker__label">Em análise</span>
  </div>
  <div class="progress-tracker__connector"></div>

  <div class="progress-tracker__step">
    <div class="progress-tracker__marker">3</div>
    <span class="progress-tracker__label">Aprovação</span>
  </div>
  <div class="progress-tracker__connector"></div>

  <div class="progress-tracker__step progress-tracker__step--disabled">
    <div class="progress-tracker__marker">4</div>
    <span class="progress-tracker__label">Publicado</span>
  </div>
</div>

Compacto (sem labels)

html

<div class="progress-tracker progress-tracker--compact">
  <div class="progress-tracker__step progress-tracker__step--completed">
    <div class="progress-tracker__marker">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
        viewBox="0 0 48 48" fill="none" stroke="currentColor"
        stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M16 24L22 30L34 18"/>
      </svg>
    </div>
  </div>
  <div class="progress-tracker__connector progress-tracker__connector--completed"></div>

  <div class="progress-tracker__step progress-tracker__step--error">
    <div class="progress-tracker__marker">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
        viewBox="0 0 48 48" fill="none" stroke="currentColor"
        stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M24 14V26"/>
        <path d="M24 34V35"/>
      </svg>
    </div>
  </div>
  <div class="progress-tracker__connector"></div>

  <div class="progress-tracker__step progress-tracker__step--disabled">
    <div class="progress-tracker__marker">3</div>
  </div>
</div>

Tamanho small

html

<div class="progress-tracker progress-tracker--sm">
  <div class="progress-tracker__step progress-tracker__step--completed">
    <div class="progress-tracker__marker">1</div>
    <span class="progress-tracker__label">Criado</span>
  </div>
  <div class="progress-tracker__connector progress-tracker__connector--completed"></div>
  <div class="progress-tracker__step progress-tracker__step--current">
    <div class="progress-tracker__marker">2</div>
    <span class="progress-tracker__label">Triagem</span>
  </div>
  <div class="progress-tracker__connector"></div>
  <div class="progress-tracker__step">
    <div class="progress-tracker__marker">3</div>
    <span class="progress-tracker__label">Encerrado</span>
  </div>
</div>

Design

Especificações visuais e tokens utilizados no componente.

Especificações

Propriedade	Padrão	Small (`--sm`)
Marker (diâmetro)	32px	24px
Fonte do marker	Inter 14px w600	Inter 12px w600
Conector (altura)	2px	2px
Label	Inter 12px w500	Inter 11px w500
Gap (marker → label)	6px	4px

Tokens utilizados

Estado	Marker fundo	Marker texto	Conector	Label
Pendente	`--surface-base-neutral-container-emphasis`	`--text-base-neutral-secondary`	`--border-base-neutral-default`	`--text-base-neutral-secondary`
Completed	`--surface-base-brand-default`	`--text-base-neutral-on-black`	`--border-base-brand-default`	`--text-base-neutral-default`
Current	`--surface-base-brand-subtle`	`--text-base-brand-default`	`--border-base-neutral-default`	`--text-base-brand-default`
Error	`--surface-base-alert-container-error`	`--text-base-error-default`	`--border-base-neutral-default`	`--text-base-error-default`
Disabled	`--surface-base-neutral-container-emphasis`	`--text-base-neutral-subtle`	`--border-base-neutral-default`	`--text-base-neutral-subtle`

Progress Tracker ​

Uso ​

Exemplos ​

Anatomia ​

Propriedades ​

Código ​

Básico com estados ​

Compacto (sem labels) ​

Tamanho small ​

Design ​

Especificações ​

Tokens utilizados ​

Progress Tracker

Uso

Exemplos

Anatomia

Propriedades

Código

Básico com estados

Compacto (sem labels)

Tamanho small

Design

Especificações

Tokens utilizados