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.
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> );};
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> );};
Prop | Default | Description |
---|---|---|
title | string Title of the toast | |
message | string 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 | |
autoDismiss | true | boolean Whether to auto dismiss the toast |
duration | 4000 | number Duration in milliseconds to auto dismiss the toast |
component | null | ({ dismiss }: { dismiss: () => void }) => ReactNode Component to render in the toast |
dismissIcon | XMarkIcon | any Icon to use for the dismiss button |
onDismiss | null | ({ id, role }: { id: string; role: string }) => void Callback function to run when the toast is dismissed |
icon | null | JSX.Element | ((props: any) => JSX.Element) Icon to render in the toast. If not provided, the icon will be based on the role |
dismissClassName | string Class name to apply to the dismiss button |