Overlay
Toast
Notificação temporária para feedback de ações.
Uso
Use o elemento <y-toaster> no seu HTML:
html
<y-toaster></y-toaster><y-button onclick="document.querySelector('y-toaster').show({ title: 'Sucesso!', description: 'Produto salvo.' })">Mostrar Toast</y-button>Exemplos
Padrão
Padrão
Propriedades
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | "default" | "success" | "destructive" | "warning" | "default" | Estilo visual |
title | string | — | Título |
description | string | — | Descrição |
duration | number | 5000 | Duração em ms |
Importação
Importe todos os componentes ou apenas este:
typescript
// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/toast.js';Acessibilidade
- Suporta navegação por teclado
- Utiliza atributos ARIA apropriados
focus-visiblepara indicação de foco