# Estados

Hover, focus, active, selected, disabled, loading, error.

Catálogo

## Estados canônicos

Cada componente interativo declara explicitamente seu comportamento em cada estado.

| 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; usa opacidade reduzida ou token 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 ou navegue com Tab 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

 Aceito os termos

checkbox · checked

 Aceito os termos

switch · off

 Notificações

switch · on

 Notificações

Showcase · Status

## Feedback de status

primary

secondary

success

alert

error

loading

Showcase · Banner

## Quatro status

Dica! Banner informativo. Comunica neutralidade ou contexto adicional.

Sucesso! Operação concluída. Estado positivo confirmado.

Atenção! Atenção necessária. Ação não bloqueante, mas relevante.

Erro! Algo falhou. Estado crítico que requer correção.

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.

Erro usa três sinais

Borda destructive + ícone + mensagem. Cor sozinha viola WCAG.

Selected não é active

Selected é persistente. Active é transitório durante a pressão.