Modal

No Kósmos, o Modal é um contêiner posicionado em uma camada inferior usado para envolver e padronizar a estrutura visual de experiências focadas.

Figma

---

Uso

O componente de Modal deve ser utilizado como o background padronizado para a construção de experiências que exijam a atenção focada do usuário, como dialogs de confirmação ou outras composições de componentes que dependam de uma área dedicada. Ele garante o padrão de elevação e background.

---

Anatomia

❖. Container

Estrutura externa que agrupa todos os elementos internos do componente. Para o container deve ser aplicado o componente de modal que padroniza a aplicação do BG e definições de elevation para estes componentes.

Padding

O espaçamento entre o Container e o conteúdo interno deve ser definido pela variável de espaçamento Container Margin em todas as bordas.

---

Posicionamento

O Modal deve ser centralizado vertical e horizontalmente na viewport. Ele sempre vai estar acima de qualquer outro componente da tela. Não deve haver Modals múltiplos ou sobrepostos.

---

Comportamento

Abertura e Fechamento

Deve ter uma transição suave (ex: fade in/out) para indicar que é um elemento que surge sobre a interface e deve fechar e ser removido da viewport na interação de clique fora dos limites do container e o pressionamento da tecla ESC.

Scroll

O Modal não deve rolar com o conteúdo da página, mas deve permanecer centralizado. Se o conteúdo do Modal for maior que a tela, apenas o conteúdo interno deve ter scroll.

---

Use cases

Confirmation

Contextual Settings

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
03/10/2025	03/10/2025	--/--/----	--/--/----	Ver na tabela

Atualizações por data

Outubro de 2025

• 03/10/20025

  • Adição do componente