FeedbackAvailable

Toast

Transient notifications with semantic status and dismiss controls.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

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

Usage

Import the component into your project and keep the source code under your 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>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Distinguish loading, progress, success, error and empty data as appropriate. Keep messages understandable without color.
The indicator needs no hover. Only actions and dismiss controls receive focus. Respect reduced motion.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
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.

Accessibility

Rules that should remain intact when adapting the component to a product.

Mount one Toaster per application. Keep important information available after a toast disappears.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.