Toast

A succinct message that is displayed temporarily.

Toaster and its components extend and require Radix UI's @radix-ui/react-toast.

Usage

First, import and add the Toaster component to your app.

pages/_app.tsx

1
import { Toaster } from '@/components/ui';
2

3
const App: FC<AppProps> = ({ Component, pageProps }) => {
4
  return (
5
    <main>
6
      <Component {...pageProps} />
7
      <Toaster />
8
    </main>
9
  );
10
};

Then, import the useToast hook, which returns a toast function that displays toasts when called:

1
import { useToast } from '@/components/ui';
2

3
const ToastButton: FC = ({
4
  title = 'Title',
5
  description = 'Swipe right to remove.',
6
  intent,
7
  action,
8
  ...rest
9
}) => {
10
  const { toast } = useToast();
11

12
  return (
13
    <Button
14
      intent={intent}
15
      onClick={() => toast({ title, description, intent, action })}
16
      {...rest}
17
    />
18
  );
19
};

Default

Intent

With action

To add an action to the toast, pass in a Button element to the action prop. Note that action takes in any React node, but it is intended to be a Button element that triggers some relevant action.

1
<DesignComponentsDisplay>
2
  <ToastButton
3
    title="Contract deployed"
4
    description="Contract deployed to 0x00000000…."
5
    intent="success"
6
    action={
7
      <Button
8
        size="sm"
9
        intent="success"
10
        href="https://etherscan.io/tx/0x0100b7a91f27db8ea706a0f729bf0677e45a8647cf7dd25fc249dce3710bea81"
11
        rightIcon={<Unknown />}
12
        newTab={true}
13
      >
14
        View
15
      </Button>
16
    }
17
  >
18
    Show toast
19
  </ToastButton>
20
</DesignComponentsDisplay>;

Select

Tooltip