Design System · Documentation → Components → Toast

React

We can use the Toast component with the custom hook useToast.

import { useToast } from '@hoverinc/design-system-react-web';

Position

By default the toast will be shown on the top right of the screen, but we can change it by passing the position prop.

live

() => {
  const toast = useToast();
  return (
    <Stack direction="column" spacing="400">
      <Stack direction="row" spacing="800">
        <Button
          onClick={() =>
            toast({
              description: 'top-left',
              position: 'top-left',
            })
          }
        >
          ↖️ Top Left
        </Button>
        <Button
          onClick={() =>
            toast({
              description: 'top-center',
              position: 'top-center',
            })
          }
        >
          ↑ Top Center
        </Button>
        <Button
          onClick={() =>
            toast({
              description: 'top-right',
              position: 'top-right',
            })
          }
        >
          ↗️ Top Right
        </Button>
      </Stack>
      <Divider />
      <Stack direction="row" spacing="400">
        <Button
          onClick={() =>
            toast({
              description: 'bottom-left',
              position: 'bottom-left',
            })
          }
        >
          ↙️ Bottom Left
        </Button>
        <Button
          onClick={() =>
            toast({
              description: 'bottom-center',
              position: 'bottom-center',
            })
          }
        >
          ↓ Bottom Center
        </Button>
        <Button
          onClick={() =>
            toast({
              description: 'bottom-right',
              position: 'bottom-right',
            })
          }
        >
          ↘️ Bottom Right
        </Button>
      </Stack>
    </Stack>
  );
};

Action

A toast can have a custom action button.

live

() => {
  const toast = useToast();
  return (
    <Stack direction="row" spacing="4">
      <Button
        onClick={() =>
          toast({
            description: 'Click to alert ->',
            props: {
              action: {
                callback: () => alert('Hello, World!'),
                label: 'Alert me',
              },
            },
          })
        }
      >
        💥 Click me!
      </Button>
    </Stack>
  );
};

Color Scheme

A toast can either be 'light' or 'dark'.

Warning
Color Scheme is only supported in the Bauhaus theme

live

() => {
  const toast = useToast();
  return (
    <Stack direction="row" spacing="400">
      <Button
        onClick={() =>
          toast({
            description: 'I am a light toast',
            props: { colorScheme: 'light' },
          })
        }
      >
        🌞 Light Toast
      </Button>
      <Button
        onClick={() =>
          toast({
            description: 'I am a dark toast',
            props: { colorScheme: 'dark' },
          })
        }
      >
        🌑 Dark Toast
      </Button>
    </Stack>
  );
};

Image

A toast can display an image.

Warning
The image prop is only supported in the Bauhaus theme

live

() => {
  const toast = useToast();
  return (
    <Stack direction="row" spacing="400">
      <Button
        onClick={() =>
          toast({
            description: 'I have an image',
            props: {
              image: { alt: 'my alt', src: '/images/kitten--500-150.jpg' },
            },
          })
        }
      >
        👀 With image
      </Button>
      <Button
        onClick={() =>
          toast({
            description: 'I have no image',
            showIcon: false,
          })
        }
      >
        👻 Without image
      </Button>
    </Stack>
  );
};

Duration

By default the toast will be shown for 5 seconds, but we can change it by passing the duration prop.

live

() => {
  const toast = useToast();
  return (
    <Stack direction="row" spacing="400">
      <Button
        onClick={() =>
          toast({
            description: 'I will be shown for 2 seconds',
            duration: 2000,
          })
        }
      >
        ⏱ 2 seconds
      </Button>
      <Button
        onClick={() =>
          toast({
            description: 'I will be shown for 10 seconds',
            duration: 10000,
          })
        }
      >
        ⏱ 10 seconds
      </Button>
    </Stack>
  );
};

States

A toast can be in a loading or error state.

live

() => {
  const toast = useToast();
  return (
    <Stack direction="row" spacing="400">
      <Button
        onClick={() =>
          toast({
            description: 'I am loading',
            status: 'loading',
            props: {
              action: { callback: () => {}, label: 'Loading' },
            },
          })
        }
      >
        ⏱ Loading...
      </Button>
      <Button
        onClick={() =>
          toast({
            description: 'I have an error',
            status: 'error',
          })
        }
      >
        ❌ Error
      </Button>
    </Stack>
  );
};

On close complete

A function can run when the toast is closed.

live

() => {
  const toast = useToast();
  return (
    <Button
      onClick={() =>
        toast({
          description: 'Close me!',
          onCloseComplete: () => {
            alert('toast closed!');
          },
        })
      }
    >
      Click me
    </Button>
  );
};

Custom Content

To display custom content instead of the default description message and dismiss or action button, use the content variant and pass the custom content as the children prop.

The content variant will display an icon-based close button in the top right of the toast container.

Warning
The content variant is only supported in the Bauhaus theme. Pass a custom render function to render custom content in the legacy theme.

live

() => {
  const toast = useToast({
    duration: null,
    props: {
      variant: 'content',
      children: (
        <Flex alignItems="start" direction="column" padding="500">
          <Heading size="xs">Bring this idea to life</Heading>
          <Body size="small" mb="400" mt={0}>
            Keep all your paint, materials, and design ideas in one place.
          </Body>
          <Button iconAfter={iconSaveOutlined} height="350" px="400">
            Save
          </Button>
        </Flex>
      ),
    },
  });
  return <Button onClick={toast}>📰 Custom Content</Button>;
};

Toast Target

A toast can be rendered inside another component.

live

() => {
  const toast = useToast();
  const [isTargeted, setIsTargeted] = useState(false);
  return (
    <>
      <Stack direction="row" spacing="400">
        <Checkbox
          isChecked={isTargeted}
          onChange={({ target: { value } }) => setIsTargeted(!isTargeted)}
        >
          📦 Put me in a box
        </Checkbox>
        <Button
          onClick={() => {
            toast({
              description: isTargeted ? "I'm in a box!" : "I'm not in a box!",
              duration: 2000,
              onCloseComplete: () => {
                setIsTargeted(false);
              },
            });
          }}
        >
          Click me!
        </Button>
      </Stack>
      <Box background="lightgray" height="500px" margin="200" width="100%">
        {isTargeted && <ToastTarget height="100%" width="100%" />}
      </Box>
    </>
  );
};

Tile

Toggle