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>
  );
};
Copy

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>
  );
};
Copy

Component API

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