Fundamentos
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 semantic do componente, sem overlay. |
hover | Cursor sobre (desktop apenas). | Bg um step mais escuro/claro. Sinaliza afford. |
focus-visible | Foco por teclado. | Ring 2px primary com offset. Não some no click do mouse. |
active | Pressão (mousedown). | Bg dois steps mais escuro. Confirma click. |
selected | Item escolhido em listas, tabs, options. | Bg surface tinted + texto medium. aria-selected=true. |
disabled | Indisponível. Bloqueia interação. | Token disabled (opacity ou bg dedicado), cursor not-allowed, sem hover. |
loading | Aguardando resposta async. | Spinner substitui ícones. Disabled implícito. |
error | Validação falhou. | Border danger, ícone alert, mensagem em support. |
read-only | Visível mas não editável. | Sem cursor de edição, contraste reduzido, sem bordas de input. |
Showcase · Button
Estados em prática
Quatro estados em destaque. Hover, focus-visible e active aparecem em cima dos cards default — passe o mouse e tabule para ver.
default
hover (passe o mouse)
disabled
loading
Showcase · TextField
Forms — estados em destaque
default
com ícone
disabled
error (invalid)
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 calculado
Componente usa bg-muted, não opacity-90 hover:opacity-100. Sistema resolve.
Focus-visible sempre
Nunca outline:none. Ring 2px primary com offset, distinto do background.
Disabled bloqueia tudo
pointer-events:none, aria-disabled, sem hover, opacity 50%, cursor:not-allowed.
Loading suprime decoração
Spinner substitui ícones. Botão disabled implícito. Texto pode mudar (Salvando...).
Error é triplo
Border danger + ícone alert + mensagem support. Cor sozinha viola WCAG.
Selected ≠ active
Selected = persistente (item escolhido). Active = transient (mousedown).