Disclaimer

Uso

O Disclaimer deve ser utilizado para exibir informações que complementam a experiência do usuário, destacando avisos ou lembretes de forma passiva, sem interromper o fluxo da navegação. Ele é recomendado quando:

• A informação precisa ser visível, mas sem demandar interação imediata.

• O nível de atenção varia conforme o conteúdo — desde lembretes discretos até alertas importantes.

• A mensagem deve se adaptar ao contexto responsivo, seja em mobile ou desktop, mantendo consistência visual e de comportamento.

Evite o uso do Disclaimer para:

• Mensagens que requerem ação do usuário (neste caso, prefira componentes interativos como Banners ou Toasts).

• Conteúdos críticos que precisam bloquear o fluxo (neste caso, prefira diálogos ou modais).

Anatomia

❖. Container

• Responsável pela estrutura visual do componente, com borda colorida que indica o nível de atenção.

• É sempre obrigatório e mantém consistência de espaçamento interno, tipografia e alinhamento tanto em desktop quanto em dispositivos móveis.

1. Icon

• Ícone posicionado à esquerda do texto, sempre obrigatório em todas as variantes.

• Na variante Neutral Secondary, o ícone é fixo e personalizável conforme o contexto da informação.

• Nas variantes Warning e Attention, o ícone é fixo no formato de interrogação, com coloração acompanhando a borda da respectiva variante.

2. Label

• Texto obrigatório responsável por comunicar a mensagem.

• Comportamento responsivo: utiliza FillContent no Figma, adaptando-se ao espaço disponível no layout.

• Não possui limite pré-definido de caracteres, cabendo ao designer garantir clareza e objetividade.

• Não sofre alterações de cor entre variantes, mantendo consistência na leitura.

Variantes

Neutral Secondary

Utilizado para comunicações informativas com baixa prioridade visual. Apresenta borda em tom cinza-claro e ícone personalizável obrigatório, ideal para mensagens complementares que não precisam competir com os elementos principais da interface.

Warning

Destaca informações de alta criticidade com borda e ícone em laranja, sinalizando situações que exigem atenção imediata do usuário. Recomendado para alertas importantes que podem impactar diretamente a experiência ou o resultado da interação.

Attention

Aplica ênfase intermediária com borda e ícone em amarelo, direcionando o foco para informações que merecem cuidado, mas sem o caráter crítico da variante Warning. Ideal para lembretes, condições especiais ou avisos preventivos.

Use cases

Histórico de Atualizações