Feedback
Tokens de feedback — sucesso, info, atenção e erro.
Cada token aponta para uma paleta em Colors. Regras gerais no hub de Tokens.
Boas Práticas
Quando usar
Sucesso em confirmações e conclusão de fluxos.
Info em banners orientativos e contexto.
Warning em situações que exigem atenção sem bloqueio.
Error em falhas, validação e bloqueios.
Alpha para fundos sutis de alerta e badges.
Quando não usar
Cores de feedback fora dos tokens documentados.
Error ou Warning como decoração sem significado.
Misturar famílias de feedback na mesma mensagem.
Tokens
Tokens
| Token | Light | Dark |
|---|---|---|
| --ui-success | success-500 | success-400 |
| --ui-color-success-600 | success-600 | success-300 |
| --ui-info | info-500 | info-400 |
| --ui-color-info-600 | info-600 | info-300 |
| --ui-warning | warning-500 | warning-400 |
| --ui-color-warning-600 | warning-600 | warning-300 |
| --ui-error | error-500 | error-400 |
| --ui-color-error-600 | error-600 | error-300 |
Alpha
| Token | Light | Dark |
|---|---|---|
| --ui-success-90 | alpha/500-90 | alpha/400-90 |
| --ui-success-75 | alpha/500-75 | alpha/400-75 |
| --ui-success-50 | alpha/500-50 | alpha/400-50 |
| --ui-success-25 | alpha/500-25 | alpha/400-25 |
| --ui-success-15 | alpha/500-15 | alpha/400-15 |
| --ui-success-10 | alpha/500-10 | alpha/400-10 |
| --ui-info-90 | alpha/500-90 | alpha/400-90 |
| --ui-info-75 | alpha/500-75 | alpha/400-75 |
| --ui-info-50 | alpha/500-50 | alpha/400-50 |
| --ui-info-25 | alpha/500-25 | alpha/400-25 |
| --ui-info-15 | alpha/500-15 | alpha/400-15 |
| --ui-info-10 | alpha/500-10 | alpha/400-10 |
| --ui-warning-90 | alpha/500-90 | alpha/400-90 |
| --ui-warning-75 | alpha/500-75 | alpha/400-75 |
| --ui-warning-50 | alpha/500-50 | alpha/400-50 |
| --ui-warning-25 | alpha/500-25 | alpha/400-25 |
| --ui-warning-15 | alpha/500-15 | alpha/400-15 |
| --ui-warning-10 | alpha/500-10 | alpha/400-10 |
| --ui-error-90 | alpha/500-90 | alpha/400-90 |
| --ui-error-75 | alpha/500-75 | alpha/400-75 |
| --ui-error-50 | alpha/500-50 | alpha/400-50 |
| --ui-error-25 | alpha/500-25 | alpha/400-25 |
| --ui-error-20 | alpha/500-20 | alpha/400-20 |
| --ui-error-15 | alpha/500-15 | alpha/400-15 |
| --ui-error-10 | alpha/500-10 | alpha/400-10 |
Guia de decisão
| Quando usar | Token |
|---|---|
| Ação concluída, fluxo finalizado com sucesso | --ui-success |
| Contexto informativo, orientação, dica | --ui-info |
| Atenção necessária — sem bloqueio do fluxo | --ui-warning |
| Erro, validação falhou, ação bloqueada | --ui-error |
| Fundo sutil de alerta ou badge de status | versão alpha (--ui-[estado]-10 / --ui-[estado]-25) |
Pareamentos recomendados
Substitua [estado] por success, info, warning ou error conforme o contexto.
| Contexto | Fundo | Texto |
|---|---|---|
| Badge / chip de status | --ui-[estado]-25 | --ui-[estado] |
| Banner / alerta sutil | --ui-[estado]-10 | --ui-color-[estado]-600 |
| Mensagem de validação inline | — | --ui-error |
| Ícone de estado em linha de tabela | — | --ui-[estado] |
Status → tom (mapa canônico)
Os status de negócio do ME mapeiam para os tons de feedback de forma consistente — a mesma cor significa a mesma coisa em qualquer index, documento ou dashboard (reconhecer, não decorar). Esta tabela é a fonte única desse mapa; o badge sempre carrega o rótulo textual (o tom nunca é o único portador de significado — acessibilidade).
| Status (exemplos) | Tom |
|---|---|
| Rascunho · Neutro | neutral |
| Em análise · Em aprovação · Em andamento | info |
| Pendente · Aguardando · A vencer | warning |
| Aprovado · Concluído · Liberado · Confirmado | success |
| Recusado · Cancelado · Bloqueado · Com inconsistência | error |
Use no Badge de status. O texto do badge é curto (1–2 palavras); o detalhe vai na descrição, não no rótulo.
Onde aparece
| Token | Componentes |
|---|---|
--ui-success | UAlert (color=success), UBadge (color=success), UFormField (mensagem de sucesso) |
--ui-info | UAlert (color=info), UBadge (color=info), ::callout (color=info) |
--ui-warning | UAlert (color=warning), UBadge (color=warning), ::callout (color=warning) |
--ui-error | UAlert (color=error), UFormField (erro de validação), UInput (estado de erro), UBadge (color=error) |