Estados
Hover, focus, active, selected, disabled, loading, error. Estado é parte do design — nunca improviso em runtime.
Catálogo
Estados canônicos
Cada componente interativo declara explicitamente seu comportamento em cada estado. Sem essa decisão, o sistema vira loteria.
| Estado | Quando | Mudança visual |
|---|---|---|
default | Repouso. Estado base. | Cor semântica do componente, sem overlay. |
hover | Cursor sobre o controle em desktop. | Superfície ou borda muda de forma sutil para indicar affordance. |
focus-visible | Foco por teclado. | Ring 2px primary com offset. Não depende de mouse. |
active | Pressão temporária, como mousedown. | Feedback curto de pressão; nunca substitui selected. |
selected | Item escolhido em listas, tabs ou options. | Estado persistente com aria-selected quando aplicável. |
disabled | Controle indisponível. | Interação bloqueada, sem hover, opacidade ou token de muted. |
loading | Aguardando resposta assíncrona. | Spinner ou estado textual. Disabled implícito. |
error | Validação falhou. | Borda destructive, ícone de alerta e mensagem de apoio. |
read-only | Valor visível mas não editável. | Sem cursor de edição e sem affordance de input. |
Showcase · Button
Estados em prática
Hover, focus-visible e active aparecem no próprio componente. Passe o mouse e tabule para ver.
default
hover / focus
disabled
loading
Showcase · TextField
Forms — estados em destaque
default
com ícone
disabled
error
Showcase · Toggles
Checkbox e Switch
checkbox · unchecked
checkbox · checked
switch · off
switch · on
Showcase · Status
Feedback de status
primary
secondary
success
alert
error
loading
Showcase · Banner
Quatro statuses
Princípios
Regras do sistema
Estado é declarado, não improvisado
Componente usa tokens semânticos e classes de estado previsíveis, não ajustes locais soltos.
Focus-visible sempre
Nunca remova foco visível. Use ring 2px primary com offset distinguível do fundo.
Disabled bloqueia interação
Combine disabled/aria-disabled, sem hover e sem acionamento por teclado ou mouse.
Loading suprime decoração
Spinner substitui ícones. A ação fica bloqueada até a resposta.
Error é triplo
Borda destructive + ícone + mensagem. Cor sozinha viola WCAG.
Selected não é active
Selected é persistente. Active é transitório durante a pressão.