Toast

Live demo

Code

import { ToastRackProvider, useToasty } from '@shieldpay/bumblebee/toast-rack';

const ToastAddifier = () => {
  const { addToast } = useToasty();

  return (
    <>
      <ComponentPreview>
        <Box stack="row" spacing="basePos3">
          <Button onClick={() => addToast(randoToast(stringToasts))}>
            Show a toast notification
          </Button>
          <Button onClick={() => addToast(randoToast(iconToasts))}>
            Show an icon toast notification
          </Button>
        </Box>
      </ComponentPreview>
    </>
  );
};

export const ToastRackComponentPage = () => {
  return (
    <ToastRackProvider>
      <ToastAddifier />
    </ToastRackProvider>
  );
};

Design

Usage

The toast notification should only be used when showing passive notifications without any actions (For example - when an action has been completed i.e. Password created)

Anatomy

The toast comes in a single size both with and without an icon. It is made up of the main plate and a text component. The icon should be pulled from our icon library only. If the master primitive component is updated, the other instances will be updated too.

The text and icon is positioned to be optically centered in the toast.

The spacing should adhere to the guidelines outlined.

Drop shadow should be as follows:

Y: 2px / Blur: 6px / Spread: 2px

It should always be positioned the allocated spacing from the bottom. The padding is outlined for each viewport.

In the instance of multiple toasts, they should stack on top of each other using the allocated spacing measurements. Each consecutive toast should appear on top with the earliest still at the bottom.

Behaviour

Toasts appear temporarily, and disappear on their own without requiring user input to be dismissed. Toasts cannot be clicked or tapped.

The toast should appear with a Fade up transition with an Ease Out animation at 300 ms.

The time that the toast should remain on screen will depend on the content of the message. As a rule of thumb we should be or 100ms per character (including spaces).

The toast should disappear with a reversed fade up with an Ease Out animation at 600 ms.

Animation example (see Fade up):

https://semantic-ui.com/modules/transition.html

Accessibility

Use the disabled or aria-disabled attributes to convey information to screen readers.