Toast is a component that displays a message to the user.
import { Toast } from 'primereact/toast';<Toast>
<Toast.Portal>
<Toast.Region>
{({ toast }) =>
toast?.state.toasts.map((toast) => (
<Toast.Item key={toast.id} data={toast}>
<Toast.Icon />
<Toast.Title />
<Toast.Description />
<Toast.Action />
<Toast.Close />
</Toast.Item>
))
}
</Toast.Region>
</Toast.Portal>
</Toast>Use toast function to create a toast.
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
import { Button } from 'primereact/button';
import { toast, Toast } from 'primereact/toast';
function BasicToast() {
return (
<Toast>
<Toast.Portal>
<Toast.Region>
{({ toast }: ToastRegionInstance) =>
toast?.toasts.map((toast: ToastType) => (
<Toast.Item key={toast.id} data={toast}>
<div className="flex items-start gap-2">
<Toast.Icon />
<div className="flex-1">
<Toast.Title className="mb-1 -mt-0.5" />
<Toast.Description />
<Toast.Action as={Button} size="small" className="mt-4" />
</div>
</div>
<Toast.Close as={Button} iconOnly severity={'secondary'} variant="text" size="small" className={'absolute top-2 right-2'}>
<i className="pi pi-times"></i>
</Toast.Close>
</Toast.Item>
))
}
</Toast.Region>
</Toast.Portal>
</Toast>
);
}
function BasicDemo() {
return (
<div className="card flex flex-wrap items-center justify-center gap-4">
<Button
onClick={() =>
toast({
title: 'Changes saved',
description: 'Are you sure you would like to remove this user? This action cannot be undone.'
})
}
variant="outlined"
>
Create toast
</Button>
<BasicToast />
</div>
);
}
export default BasicDemo;Use toast function to create a toast with different variants.
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
import { Button } from 'primereact/button';
import { toast, Toast } from 'primereact/toast';
function VariantsToast() {
return (
<Toast group="variants">
<Toast.Portal>
<Toast.Region>
{({ toast }: ToastRegionInstance) =>
toast?.toasts.map((toast: ToastType) => (
<Toast.Item key={toast.id} data={toast}>
<div className="flex items-start gap-2">
<Toast.Icon />
<div className="flex-1">
<Toast.Title className="mb-1 -mt-0.5" />
<Toast.Description />
<Toast.Action as={Button} size="small" className="mt-4" />
</div>
</div>
<Toast.Close as={Button} iconOnly severity={'secondary'} variant="text" size="small" className={'absolute top-2 right-2'}>
<i className="pi pi-times"></i>
</Toast.Close>
</Toast.Item>
))
}
</Toast.Region>
</Toast.Portal>
</Toast>
);
}
function VariantsDemo() {
function handleToastPromise() {
function fakeApiCall(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
const random = Math.random();
if (random < 0.5) {
resolve('Success!');
} else {
reject(new Error('Something went wrong'));
}
}, 2000); // 2 saniye beklet
});
}
toast.promise(fakeApiCall(), {
loading: {
title: 'Please wait...',
description: 'Your request is being processed. This may take a moment.',
group: 'variants'
},
success: (result) => ({
title: 'Success!',
description: `${result}. Everything went smoothly. Thank you for your patience.`,
group: 'variants'
}),
error: (error: unknown) => ({
title: 'Oops, something went wrong',
description: `Error: ${error instanceof Error ? error.message : 'Unknown error'}. Please try again or contact support if the problem persists.`,
group: 'variants'
})
});
}
function handleCustomToast() {
const id = toast.custom(
<div className="space-y-2">
<div>
<h1 className="font-medium text-surface-900 dark:text-surface-0 leading-6">
Purchase complete!{' '}
<a href="/orders/123" className="!underline hover:opacity-75">
View receipt
</a>
</h1>
<p className="text-surface-500 !leading- mt-2">
Your order is being processed.{' '}
<a href="/account/orders" className="!underline hover:opacity-75">
Track all orders
</a>{' '}
or{' '}
<a href="/support/returns" className="!underline hover:opacity-75">
learn about returns
</a>
</p>
</div>
<div className="flex items-center">
<button onClick={() => toast.remove(id)} className="font-medium px-3 py-1.5 rounded-sm bg-indigo-50 hover:bg-indigo-100 dark:bg-indigo-950/75 dark:hover:bg-indigo-950 text-indigo-500 dark:text-indigo-400">
Action
</button>
</div>
</div>,
{
group: 'variants'
}
);
}
const handleLoadingToast = () => {
const id = toast.loading({
title: 'Loading',
description: 'This is a loading toast',
group: 'variants'
});
setTimeout(() => {
toast.success({
id,
title: 'Uploaded',
description: 'This is a uploaded toast',
group: 'variants'
});
}, 2000);
};
return (
<div className="card flex flex-wrap items-center justify-center gap-4">
<Button
onClick={() => {
toast({
title: 'Default',
description: 'This is a default toast',
group: 'variants'
});
}}
variant="outlined"
>
Default
</Button>
<Button
onClick={() => {
toast.info({
title: 'Info',
description: 'This is an info toast',
group: 'variants'
});
}}
variant="outlined"
severity="info"
>
Info
</Button>
<Button
onClick={() =>
toast.success({
title: 'Success',
description: 'This is a success toast',
group: 'variants'
})
}
variant="outlined"
severity="success"
>
Success
</Button>
<Button onClick={() => toast.danger({ title: 'Danger', description: 'This is a danger toast', group: 'variants' })} variant="outlined" severity="danger">
Danger
</Button>
<Button onClick={() => toast.warn({ title: 'Warn', description: 'This is a warning toast', group: 'variants' })} variant="outlined" severity="warn">
Warn
</Button>
<Button onClick={handleLoadingToast} variant="outlined">
Loading
</Button>
<Button onClick={handleToastPromise} variant="outlined">
Promise
</Button>
<Button onClick={handleCustomToast} variant="outlined">
Custom
</Button>
<VariantsToast />
</div>
);
}
export default VariantsDemo;Use position prop to change the position of the toast.
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
import { Button } from 'primereact/button';
import { toast, Toast } from 'primereact/toast';
function PositionToast({ position = 'bottom-right' }: { position: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center' }) {
return (
<Toast position={position} group={position}>
<Toast.Portal>
<Toast.Region>
{({ toast }: ToastRegionInstance) =>
toast?.toasts.map((toast: ToastType) => (
<Toast.Item key={toast.id} data={toast}>
<div className="flex items-start gap-2">
<Toast.Icon />
<div className="flex-1">
<Toast.Title className="mb-1 -mt-0.5" />
<Toast.Description />
<Toast.Action as={Button} size="small" className="mt-4" />
</div>
</div>
<Toast.Close as={Button} iconOnly severity={'secondary'} variant="text" size="small" className={'absolute top-2 right-2'}>
<i className="pi pi-times"></i>
</Toast.Close>
</Toast.Item>
))
}
</Toast.Region>
</Toast.Portal>
</Toast>
);
}
function PositionDemo() {
const createToast = (group: string) => {
toast({
title: 'Changes saved',
description: 'Are you sure you would like to remove this user? This action cannot be undone.',
group
});
};
return (
<div className="card flex flex-wrap items-center justify-center gap-4">
<Button onClick={() => createToast('top-left')} variant="outlined">
Top Left
</Button>
<Button onClick={() => createToast('top-center')} variant="outlined">
Top Center
</Button>
<Button onClick={() => createToast('top-right')} variant="outlined">
Top Right
</Button>
<Button onClick={() => createToast('bottom-left')} variant="outlined">
Bottom Left
</Button>
<Button onClick={() => createToast('bottom-center')} variant="outlined">
Bottom Center
</Button>
<Button onClick={() => createToast('bottom-right')} variant="outlined">
Bottom Right
</Button>
<PositionToast position="top-left" />
<PositionToast position="top-right" />
<PositionToast position="top-center" />
<PositionToast position="bottom-left" />
<PositionToast position="bottom-right" />
<PositionToast position="bottom-center" />
</div>
);
}
export default PositionDemo;Use richColors prop to enable rich colors for the toast.
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
import { Button } from 'primereact/button';
import { toast, Toast } from 'primereact/toast';
function RichColorsToast() {
return (
<Toast richColors group="rich-colors">
<Toast.Portal>
<Toast.Region>
{({ toast }: ToastRegionInstance) =>
toast?.toasts.map((toastItem: ToastType) => (
<Toast.Item key={toastItem.id} data={toastItem}>
<div className="flex items-start gap-2">
<Toast.Icon />
<div className="flex-1">
<Toast.Title className="mb-1 -mt-0.5" />
<Toast.Description />
<Toast.Action as={Button} size="small" className="mt-4" />
</div>
</div>
<Toast.Close as={Button} iconOnly severity={toastItem.variant ?? 'secondary'} variant="text" size="small" className={'absolute top-2 right-2'}>
<i className="pi pi-times"></i>
</Toast.Close>
</Toast.Item>
))
}
</Toast.Region>
</Toast.Portal>
</Toast>
);
}
function RichColorsDemo() {
return (
<div className="card flex flex-wrap items-center justify-center gap-4">
<Button variant="outlined" severity="info" onClick={() => toast.info({ title: 'Info', description: 'This is an info toast', group: 'rich-colors' })}>
Info
</Button>
<Button
variant="outlined"
severity="success"
onClick={() =>
toast.success({
title: 'Success',
description: 'This is a success toast',
group: 'rich-colors'
})
}
>
Success
</Button>
<Button variant="outlined" severity="danger" onClick={() => toast.danger({ title: 'Error', description: 'This is an error toast', group: 'rich-colors' })}>
Danger
</Button>
<Button variant="outlined" severity="warn" onClick={() => toast.warn({ title: 'Warning', description: 'This is a warning toast', group: 'rich-colors' })}>
Warn
</Button>
<RichColorsToast />
</div>
);
}
export default RichColorsDemo;Use the action prop to add an interactive button to the toast.
import { ToastRegionInstance, ToastType } from '@primereact/types/shared/toast';
import { Button } from 'primereact/button';
import { toast, Toast } from 'primereact/toast';
function ActionToast() {
return (
<Toast group="action">
<Toast.Portal>
<Toast.Region>
{({ toast }: ToastRegionInstance) =>
toast?.toasts.map((toast: ToastType) => (
<Toast.Item key={toast.id} data={toast}>
<div className="flex items-start gap-2">
<Toast.Icon />
<div className="flex-1">
<Toast.Title className="mb-1 -mt-0.5" />
<Toast.Description />
<Toast.Action as={Button} size="small" className="mt-4" />
</div>
</div>
<Toast.Close as={Button} iconOnly severity={'secondary'} variant="text" size="small" className={'absolute top-2 right-2'}>
<i className="pi pi-times"></i>
</Toast.Close>
</Toast.Item>
))
}
</Toast.Region>
</Toast.Portal>
</Toast>
);
}
function ActionDemo() {
const handleCreateToast = () => {
const id = toast({
title: 'Changes saved',
description: 'Are you sure you would like to remove this user? This action cannot be undone.',
group: 'action',
action: {
children: 'Undo',
onClick: () => {
toast.remove(id);
toast({
title: 'Changes saved',
description: 'Are you sure you would like to remove this user? This action cannot be undone.',
group: 'action'
});
}
}
});
};
return (
<div className="card flex flex-wrap items-center justify-center gap-4">
<Button onClick={handleCreateToast} variant="outlined">
Create toast with action
</Button>
<ActionToast />
</div>
);
}
export default ActionDemo;The remove method removes a toast by its ID by animating it out. If id is not provided, it will remove all toasts.
toast.remove(id);The delete method removes a toast by its ID without animating it out. If id is not provided, it will remove all toasts.
toast.delete(id);The update method updates a toast by its ID. It accepts an object with the properties you want to update.
const id = toast.loading({
title: 'Please wait.',
description: 'This will take a moment'
// ...
});Change the toast options by its ID.
toast.update(id, {
title: 'Success',
description: 'The operation was successful',
variant: 'success'
// ...
});The promise method is a wrapper around the toast function that allows you to create a toast that is based on the result of a promise. Each state has its own toast configuration.
toast.promise(Promise, {
loading: {
title: '',
description: ''
// ...
},
success: {
title: '',
description: ''
// ...
},
error: {
title: '',
description: ''
// ...
}
});The custom method creates a toast that is based on a custom component. Also, it accepts other props from toast function.
toast.custom(<div>Hello</div>, {
duration: 1000
// ...
});The action prop accepts all Toast.Action component properties - any props you pass will be directly forwarded to the underlying Toast.Action component, including children, onClick, className, and other Button-specific properties.
toast({
title: '',
description: '',
action: {
children: '',
onClick: () => {},
className: ''
// ...
}
});The duration prop is the duration of the toast in milliseconds. If you pass Infinity, the toast will stay visible until the user removes it manually.
toast({
duration: 1000
// ...
});The icon prop accepts a React node or a function that returns a React node.
toast({
icon: <CheckIcon />
// ...
});onDismiss and onTimeout callbacks are called when the toast is dismissed or timed out.
toast({
onDismiss: () => {},
onTimeout: () => {}
// ...
});Add group to the toast to group it with other toasts.
toast({
group: 'group-1'
// ...
});Toast component use alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true".