EchoSistema Template
Índice da vitrine

Ações

Formulários

Retorno

Conteúdo

Retorno

Alerts em oito tons, modais nativos e os dois jeitos de dizer que algo está a caminho.

Alerts

Avisos em oito tons, a mesma paleta das intenções: os quatro semânticos de status e os quatro tonais, nomeados.

InformaçãoUm aviso neutro, para contexto ou novidade que não pede ação.
SucessoA operação terminou como esperado; nada mais a fazer.
AtençãoAlgo pede a sua revisão antes de continuar.
ErroA operação falhou; verifique os dados e tente de novo.
CautelaO amarelo de atenção, um degrau abaixo do laranja: leia antes de seguir.
Azul-açoO azul-aço do MIV como tom nomeado, para nota institucional sem urgência.
Azul-marinhoO campo profundo do grupo como aviso; o acento clareia no tema escuro para não sumir.
EscuroO neutro escuro, para o aviso que não pede cor nenhuma.

Modais

O dialog nativo em superfície opaca do tema: foco preso, Esc fecha, a página atrás trava e o fundo fica embaçado, ilegível, para o foco ser só o modal; clique fora não fecha. O modal aceita as mesmas intenções dos botões: a cunha da borda, como nos alerts, e a ação primária seguem o tom.

.es-dialog

.es-dialog--sm … .es-dialog--xxl

.es-dialog + .es-i--*

Modais de conta

Entrar, criar conta, recuperar e trocar a senha, e a sessão bloqueada: cinco composições prontas sobre o mesmo echo-modal. Nenhuma delas fala com a rede — cada uma emite submit com os dados e espera as props pending e error de quem chamou.

<auth-login-modal> · <auth-register-modal> · <auth-forgot-password-modal>

Os três conversam: os links de dentro de cada um trocam de modal sem fechar o fluxo.

<auth-update-password-modal> · <auth-lock-modal>

O bloqueio não tem botão de fechar e recusa o Escape; nesta amostra, qualquer senha com 8 caracteres desbloqueia.

Bloqueio e esqueletos

Os dois jeitos de dizer que algo está a caminho: o véu que cobre a região pronta e a mancha que ocupa o lugar do que ainda não chegou.

<echo-block>

Clique no botão para ver a região ser coberta. Enquanto o véu está no ar, o conteúdo fica inerte: o Tab não entra nele.

.es-skeleton

Toasts

O aviso que flutua sobre a página, empilhado por um composable global. A região de anúncio fica montada sempre, mesmo vazia: uma que só aparece junto com a mensagem costuma não ser lida.

useToast().push()

position + align

·

A posição mora no estado global, então qualquer lugar da aplicação pode pedir onde o aviso aparece.

timeout: 0

Com timeout zero o aviso fica até alguém fechar; o padrão some em 4,5 segundos.

Rodízios

Sempre aria-hidden: quem anuncia que algo carrega é o aria-busy da região, e um rodízio anunciado sozinho não diz o que está acontecendo.

.es-spinner

.es-spinner + .es-i--*

Sobre este modal

A estrutura é a da instrução: cabeçalho com título e botão de fechar, corpo que rola quando precisa e rodapé com a ação primária à direita.

Conteúdo longo

Os parágrafos abaixo repetem de propósito: o corpo rola dentro do diálogo, cabeçalho e rodapé ficam fixos e a página atrás não se move.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

Escala de largura --md

Este modal troca só a classe de tamanho; os parágrafos abaixo repetem para o corpo rolar por dentro em qualquer largura.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

O texto corre no corpo do diálogo, nunca na página: o cabeçalho segura o título e o rodapé mantém as ações sempre à vista.

Confirmar a ação

A cunha e o botão primário herdam a intenção escolhida. Numa ação destrutiva de verdade, o verbo do botão é explícito, Excluir e não OK, e a intenção é danger.

primary

Entrar

Use o e-mail cadastrado na plataforma.

Ainda não tem conta?

Criar conta

Leva um minuto: nome, e-mail e uma senha.

Já tem conta?

Recuperar a senha

Informe o e-mail da conta e enviamos um link para você definir uma senha nova.

Alterar a senha

Escolha a nova senha da conta. O link do e-mail é quem autoriza esta troca.

Sessão bloqueada

Ada Lovelace

Digite a senha para continuar de onde parou.

EchoSistema Template

A base visual dos sites de plataforma do grupo EchoSistema.

© 2026 EchoSistema S.A. · Template padrão EchoSistema