Toast

Transient notification using Base UI Toast primitive + createToastManager.

stable client:visible

Rendered example — light + dark

Light

Dark

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source for the full API.

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

function Notify() {
  const toast = useToast();
  return (
    <Button onClick={() => toast.add({ title: 'Saved', description: 'Changes stored.' })}>
      Save
    </Button>
  );
}

export default function App() {
  return (
    <ToastProvider>
      <Notify />
    </ToastProvider>
  );
}