Skip to main content

Toast

Toast is used to display a message to the user. They are usually displayed at the top of the screen and disappear after a few seconds.

Basic Usage


import { Button, useToast } from '@fluid-design/fluid-ui';
export const ToastSimple = () => {
const [presentToast] = useToast();
return (
<Wrap>
<Button
label='Present Toast'
onClick={() =>
presentToast({
title: 'Order placed',
message: 'Your order has been placed.',
role: 'success', // success, error, info
autoDismiss: true, // allows the toast to dismiss automatically
duration: 3000, // will dismiss after 3 seconds
component: null, // this will replace the message
})
}
/>
</Wrap>
);
};

Custom Toast

You can also have an unstyled toast with a custom component. This is useful if you want to have a toast with a custom layout. Blank role will not apply anything to the toast, which means you'll need to handle the dismiss button yourself.


import { Button, useToast } from '@fluid-design/fluid-ui';
export const ToastCustom = () => {
const [presentToast] = useToast();
const component = ({ dismiss }) => (
<div className='flex flex-col items-center justify-center gap-4 dark:text-white p-2'>
<h3 className='text-2xl font-bold'>Custom Body</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptates, quod, quia, voluptatibus quae voluptatem quibusdam
</p>
<div className='flex justify-between w-full'>
<div className='flex-grow' />
<Button
label='Dismiss'
onClick={dismiss}
color='fuchsia'
weight='clear'
size='sm'
/>
</div>
</div>
);
return (
<Wrap>
<Button
label='Custom Toast'
onClick={() =>
presentToast({
role: 'blank',
component,
} as any)
}
weight='light'
color='gray'
/>
</Wrap>
);
};

Component API

PropDefaultDescription
titlestring

Title of the toast

messagestring

Message to display in the toast. Note: If component is provided, message will be ignored

role'default''success', 'error', 'info', 'warning', 'default', 'blank'

Role of the toast

id

The id of the toast

autoDismisstrueboolean

Whether to auto dismiss the toast

duration4000number

Duration in milliseconds to auto dismiss the toast

componentnull({ dismiss }: { dismiss: () => void }) => ReactNode

Component to render in the toast

dismissIconXMarkIconany

Icon to use for the dismiss button

onDismissnull({ id, role }: { id: string; role: string }) => void

Callback function to run when the toast is dismissed

iconnullJSX.Element | ((props: any) => JSX.Element)

Icon to render in the toast. If not provided, the icon will be based on the role

dismissClassNamestring

Class name to apply to the dismiss button