Design
    Toast

    Toast

    A succinct message that is displayed temporarily.

    Toaster and its components extend and require Radix UI's @radix-ui/react-toast (opens in a new tab).

    Usage

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

    ReactReact's logo.
    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 title="Contract deployed" description="Contract deployed to 0x00000000…." intent="success" action={<Button size="sm" intent="success" href="https://etherscan.io/tx/0x0100b7a91f27db8ea706a0f729bf0677e45a8647cf7dd25fc249dce3710bea81" rightIcon={<Unknown />}  newTab={true}>View</Button>}>Show toast</ToastButton>
    3
    </DesignComponentsDisplay>
    SelectTooltip