home/patterns/status indicators
patterns

status indicators

Sinalizações de estado: online/offline, sync, erro. Cor + dot + label, com semântica de screen reader correta (aria-live).

biblioteca · status badges

01
stablebetanewdraft

estados de sistema · dot + label

02

Padrão recomendado: dot + label. O dot tem aria-hidden="true" (decorativo); o label é a verdade. Mudanças dinâmicas usam role="status" + aria-live="polite".

online · 4 usuários conectados
offline · última conexão há 2min
sincronizando · 60% concluído
erro · falha ao sincronizar
atenção · disco quase cheio

estado dinâmico · aria-live

03

Container que muda em tempo real precisa de aria-live pra que leitores de tela anunciem a mudança:

<!-- container com aria-live --> <div role="status" aria-live="polite" aria-atomic="true"> <span class="status-dot status-dot--online" aria-hidden="true"></span> <span>online · 4 usuários conectados</span> </div> // JS atualiza o texto · screen reader anuncia sozinho container.querySelector('span:last-child').textContent = 'offline · sem conexão';

tabela de estados

04
estadodot classaria-livecor
Onlinestatus-dot--onlinepolite--ch-code-active
Offlinestatus-dot--offlinepolite--ch-java
Sincronizandostatus-dot--sync (pulsa)polite--ch-code
Errostatus-dot--errorassertive--support-error
Avisostatus-dot--warningpolite--support-warning

regras

05

use

  • Cor + dot + texto sempre · nunca só cor
  • Container com role='status' + aria-live='polite' pra updates
  • aria-atomic='true' pra ler o estado completo
  • aria-live='assertive' só pra erros críticos
  • Dot decorativo · aria-hidden='true'

não use

  • Só cor pra transmitir significado
  • Mudar de estado sem feedback visual
  • Pontos coloridos sem label adjacente
  • aria-live='assertive' em tudo · atrapalha screen reader
  • Tooltip sozinho como única indicação