Toast

@coinbase/cds-web@8.34.1

A temporary notification that appears at the bottom of the screen.

Import

import { Toast } from '@coinbase/cds-web/overlays/Toast'

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• Alert,
• Modal,
• Banner

---

󰏖

View as Markdown

Get Started

1. Add PortalProvider to the root of your app if it doesn't exist.
2. Import the useToast hook: import { useToast } from '@coinbase/cds-web/overlays/useToast';
3. Show a toast

const toast = useToast();
toast.show('Copied to clipboard');

Basic Example

Loading...

󰙡

Live Code

function ToastExample() {
  function BasicToast() {
    const toast = useToast();
    const [toastText, setToastText] = useState('Copied to clipboard');

    const handleShowToast = useCallback(() => {
      toast.show(toastText, {
        action: { label: 'Action', onClick: () => console.log('action pressed') },
        onWillHide: () => {
          console.log('toast hiding');
        },
        onDidHide: () => {
          console.log('toast hidden');
        },
      });
    }, [toast, toastText]);

    const handleNoAction = () => toast.show(toastText);

    const handleNoClose = () =>
      toast.show(toastText, {
        action: { label: 'Action', onPress: () => console.log('action pressed') },
        hideCloseButton: true,
      });

    const handleTextOnly = () => toast.show(toastText, { hideCloseButton: true });

    const handleBottomOffset = () => {
      toast.show('Toast copy', {
        bottomOffset: 100,
      });
    };

    const handleVariant = () => {
      toast.show('Toast copy', {
        variant: 'bgNegative',
      });
    };

    return (
      <>
        <Box paddingBottom={3}>
          <TextInput
            label="Toast text"
            placeholder="Type anything to show in toast"
            value={toastText}
            onChange={(e) => setToastText(e.target.value)}
          />
        </Box>
        <HStack gap={1} flexWrap="wrap">
          <Button onClick={handleShowToast}>Show Toast</Button>
          <Button onClick={handleNoAction}>No Action</Button>
          <Button onClick={handleNoClose}>No Close</Button>
          <Button onClick={handleTextOnly}>Text Only</Button>
          <Button onClick={handleBottomOffset}>Bottom Offset</Button>
          <Button onClick={handleVariant}>Variant</Button>
        </HStack>
      </>
    );
  }

  return <BasicToast />;
}