Toast
A temporary notification that appears on screen to inform users.
Toast wraps the Base UI Toast
primitive with a stacked viewport and an anchored variant. Mount Toaster once
in your app, then call toast.add from anywhere. ToastProvider,
toastManager, AnchoredToastProvider and anchoredToastManager remain
available for the anchored surface. success, warning and info read their
colour from the preset's semantic Tokens.
kosori does not ship sonner: use toast from @kosori/toast instead.
Installation
npx shadcn@latest add @kosori/toastExample
toast-example.tsx
'use client';
import { Button } from '@/components/ui/button';
import { toast } from '@/components/ui/toast';
const addDefaultToast = () => {
toast.add({
description: 'Monday, January 3rd at 6:00pm',
title: 'Event has been created',
});
};
const addSuccessToast = () => {
toast.add({
description: 'Your changes have been saved.',
title: 'Success!',
type: 'success',
});
};
const addErrorToast = () => {
toast.add({
description: 'There was a problem with your request.',
title: 'Uh oh! Something went wrong.',
type: 'error',
});
};
const addInfoToast = () => {
toast.add({
description: 'You can add components to your app using the cli.',
title: 'Heads up!',
type: 'info',
});
};
const addWarningToast = () => {
toast.add({
description: 'Your session is about to expire.',
title: 'Warning!',
type: 'warning',
});
};
const ToastExample = () => (
<div className='flex flex-wrap gap-2'>
<Button onClick={addDefaultToast} variant='outline'>
Default Toast
</Button>
<Button onClick={addSuccessToast} variant='outline'>
Success Toast
</Button>
<Button onClick={addErrorToast} variant='outline'>
Error Toast
</Button>
<Button onClick={addInfoToast} variant='outline'>
Info Toast
</Button>
<Button onClick={addWarningToast} variant='outline'>
Warning Toast
</Button>
</div>
);
export default ToastExample;
Usage
Mount Toaster once, in your layout:
import { Toaster } from '@/components/ui/toast';
const Layout = ({ children }: { children: React.ReactNode }) => (
<Toaster>{children}</Toaster>
);Then call toast.add from a client component:
'use client';
import { Button } from '@/components/ui/button';
import { toast } from '@/components/ui/toast';
const Notify = () => (
<Button
onClick={() => toast.add({ title: 'Saved', type: 'success' })}
variant='outline'
>
Show toast
</Button>
);Compose Toast, ToastContent, ToastTitle, ToastDescription,
ToastAction and ToastClose when a notification needs a custom layout.