1. Components
  2. Toast

Toast

A succinct message that is displayed temporarily.

Usage

First, import and add the Toaster component to your app's root layout.

ReactReact's logo.
app/layout.tsx
1
import { Toaster } from '@/components/ui';
2


3
export default function Layout({ children }: { children: React.ReactNode }) {
4
  return (
5
    <html lang="en">
6
      <body>
7
        <main />
8
      </body>
9
      <Toaster />
10
    </html>
11
  );
12
};

Then, import the toast function that displays toasts when called:

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


3
const ToastButton: React.FC<ToastButtonProps> = ({
4
  children,
5
  intent,
6
  title = 'Title',
7
  description = 'Some short description.',
8
  ...toastPropsRest
9
}) => {
10
  return (
11
    <Button
12
      intent={intent}
13
      onClick={() => toast({ title, description, intent, ...toastPropsRest })}
14
      {...rest}
15
    >
16
      {children}
17
    </Button>
18
  );
19
};

Default

Intent

Close button

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 className="grid-flow-col grid-rows-1">
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>

Alternatively, an object of type { label: string; onClick: (event: MouseEvent<HTMLButtonElement, MoustEvent>) => void } may be passed in.

Text AreaTooltip