FeedbackDisponible

Toast

Notificaciones temporales con estado semántico y controles de cierre.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/toast.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { Toaster, toast } from '@/components/ui/toast';
import { Button } from '@/components/ui/button';

export default function Demo() {
  return (
    <Toaster>
      <Button
        onClick={() =>
          toast.add({
            title: 'Component saved',
            description: 'Added to your demo collection.',
            type: 'success',
          })
        }
      >
        Show notification
      </Button>
    </Toaster>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Distingue carga, progreso, éxito, error y ausencia de datos según el componente. Mantén el mensaje comprensible sin color.
El indicador no necesita hover. Solo sus acciones o controles de cierre reciben foco. Respeta la preferencia de movimiento reducido.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
toast.add	function	—	Enqueues title, description, type, and optional action.
Toaster.timeout	number	primitive default	Default dismissal timeout.
Toaster.closeLabel	string	Close toast	Translated accessible name of the default close control.
Toaster.viewportLabel	string	Notifications	Translated accessible name of the notification region.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.