Toast

Toasts display temporary feedback notifications at the top right of the user's screen. They are meant to be noticed without disrupting a user's experience or requiring an action to be taken.

First, render the <Toaster /> component in your app root:

// import { Toaster } from '@eds/toast';

function App() {
  return (
    <Core>
      <YourApp />
      <Toaster />
    </Core>
  );
}

Then use the toast object to show toasts:

// import { toast } from '@eds/toast';

toast.success({ message: 'Operation completed successfully' });
toast.error({ message: 'Something went wrong' });

Use toast.success() for successful actions and toast.error() for errors.

Show codeCopy code

In small viewports (>= 576px), toast notifications slide in and out from the top right of the screen, with xsmall space (0.5rem/8px) between each. New toast notifications should appear at the top of the list, with older notifications being pushed down until they are dismissed.

In xsmall viewports (< 576px), the toast notifications slide in and out from the bottom center of the screen.

Toaster have a minWidth of 16rem/256px and maxWidth of 25rem/400px.

In xsmall viewports, the width of the modal will consume 100% of the container with a 1rem/16px margin on each side.

Show codeCopy code

A message is required in order to render a toast. Messages should be strings. It's best to keep messages succinct.

Show codeCopy code

By default, the toast comes with a "dismiss" button in the form of a close icon. You can optionally add an action button which requires buttonText and onClickButton props to be set. Also available is a link which requires both a linkText and linkHref.

Show codeCopy code

Toasts are set to auto-dismiss after 5 seconds by default, but hovering over a toast prevents this automatic dismissal. Alternatively, users can simply click the close icon to dismiss the toast instantly.

The <Toast /> component and toastMessage function are deprecated and will be removed in a future version.

Deprecated:

const [positiveMessage, setPositiveMessage] = useState<symbol>();
const [criticalMessage, setCriticalMessage] = useState<symbol>();

return (
  <>
    <Flex gap="small">
      <Button
        label="Add positive toast"
        onClick={() => setPositiveMessage(toastMessage('Positive message'))}
        tone="neutral"
      />
      <Button
        label="Add critical toast"
        onClick={() => setCriticalMessage(toastMessage('Critical message'))}
        tone="neutral"
      />
    </Flex>

    {positiveMessage && <Toast message={positiveMessage} tone="positive" />}
    {criticalMessage && <Toast message={criticalMessage} tone="critical" />}
  </>
);

Recommended:

<Flex gap="small">
  <Button label="Add positive toast" onClick={() => toast.success({ message: 'Positive message' })} tone="neutral" />
  <Button label="Add critical toast" onClick={() => toast.error({ message: 'Critical message' })} tone="neutral" />
</Flex>