Toast | Design System Docs

Uso Básico

Notificación estándar. En Astro, asignamos un ID al componente y disparamos el evento desde un bloque <script>.

Code Snippet


---
import { Button } from "design-system-astro";
---

<Button id="btn-toast-default">Mostrar Toast Default</Button>

<script>
  import { toast } from "design-system-astro";

  document.getElementById('btn-toast-default')?.addEventListener('click', () => {
    toast({
      title: "Perfil actualizado",
      description: "Los cambios se han guardado correctamente en tu cuenta.",
      variant: "default"
    });
  });
</script>

Variantes de Color

Toasts mapeados directamente a los tokens de diseño (Primary, Secondary, Destructive).

Code Snippet


---
import { Button } from "design-system-astro";
---

<div class="flex flex-wrap gap-4">
  <Button id="btn-toast-primary">Primary</Button>
  <Button id="btn-toast-secondary" variant="secondary">Secondary</Button>
  <Button id="btn-toast-destructive" variant="destructive">Destructive</Button>
</div>

<script>
  import { toast } from "design-system-astro";

  document.getElementById('btn-toast-primary')?.addEventListener('click', () => {
    toast({ title: "Acción principal", variant: "primary" });
  });

  document.getElementById('btn-toast-secondary')?.addEventListener('click', () => {
    toast({ title: "Acción secundaria", variant: "secondary" });
  });

  document.getElementById('btn-toast-destructive')?.addEventListener('click', () => {
    toast({ 
      title: "Error crítico", 
      description: "Acción irreversible ejecutada.", 
      variant: "destructive" 
    });
  });
</script>