Feedback
Helpers
Padrões auxiliares: empty, error, loading, no results e offline.
Overview
Demonstração real e interativa de Helpers nas larguras desktop, tablet e mobile.
Nenhum edital encontrado
Crie um novo monitoramento para começar a receber oportunidades.
Playground
Altere as propriedades e veja o componente atualizar em tempo real.
Nenhum edital encontrado
Crie um novo monitoramento para começar a receber oportunidades.
Superfície
Densidade
Largura
Ajuste o contexto de renderização para validar o componente em diferentes superfícies e larguras.
States
Todos os estados exibidos simultaneamente para facilitar a comparação.
Default
Hover
Feedback imediato
Focus
Anel de foco visível
Disabled
opacity 60%
Examples
Exemplos realistas de uso em contexto de produto.
Error State
Algo deu errado
Não foi possível carregar os dados. Tente novamente em instantes.
Loading State
No Results
Nenhum resultado para “concorrência”
Revise os termos ou remova alguns filtros.
Permission State
Acesso restrito
Você não tem permissão para visualizar contratos. Solicite acesso ao administrador.
Offline State
Você está offline
As alterações serão sincronizadas quando a conexão voltar.
Keyboard Shortcuts
Usage
Critérios de escolha e boas práticas.
When to use
- Sempre que uma tela puder ficar sem dados, falhar ou carregar.
- Para comunicar restrições de permissão e conectividade.
When not to use
- Para feedback de ação pontual — use Toast.
- Para avisos dentro de formulários — use Inline Message.
Explique a causa e ofereça a próxima ação possível.
Não deixe áreas vazias sem explicação ou com mensagens genéricas de erro.
Accessibility
Requisitos obrigatórios para conformidade WCAG 2.1 AA.
- Contraste mínimo de 4.5:1 entre texto e fundo (WCAG 2.1 AA).
- Todos os elementos interativos são alcançáveis via Tab e acionáveis por Enter/Espaço.
- Foco sempre visível com anel de 2px usando --color-focus e offset de 2px.
- Área mínima de toque de 44x44px em dispositivos móveis.
- Estados disabled recebem aria-disabled e são removidos da ordem de tabulação quando aplicável.
Specifications
Valores de referência para implementação, sempre baseados em tokens.
| Propriedade | Valor | Token |
|---|---|---|
| Ícone | 20–24px | |
| Título | 15px / 600 | |
| Descrição | 13px / 20px | |
| Espaçamento vertical | 12–16px |