Overlay

Dialog

Modal dialog para interações que requerem atenção do usuário.

Uso

Use o elemento <y-dialog> no seu HTML:

html

<y-button onclick="this.nextElementSibling.open = true">Abrir Dialog</y-button><y-dialog title="Confirmar pedido" description="Deseja confirmar este pedido?">  <div slot="footer">    <y-button variant="outline">Cancelar</y-button>    <y-button>Confirmar</y-button>  </div></y-dialog>

Exemplos

Padrão

Propriedades

Propriedade	Tipo	Padrão	Descrição
`open`	`boolean`	`false`	Controla visibilidade
`title`	`string`	—	Título do dialog
`description`	`string`	—	Descrição do dialog

Importação

Importe todos os componentes ou apenas este:

typescript

// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/dialog.js';

Acessibilidade

Suporta navegação por teclado
Utiliza atributos ARIA apropriados
focus-visible para indicação de foco