Toast

function Preview() {
  const toast = useToast();
  return (
    <Button onClick={() => toast.show({ text: "Account created", icon: IconZap })}>
      Create an account
    </Button>
  ) 
}

You can display a toast on the screen using the useToast hook, which returns a toast object with two methods: show and hide. Calling show will render a toast based on the properties you pass to the method. It will hide automatically after a predefined timeout. For example, you can display a toast with an icon, title, text, and 1-2 actions in an actionsSlot. As a result of the show method call, you get an id that you can use later to call the hide method.

In the following example, we show a Toast on a button click and hide it when an undo button is clicked inside the toast.

function Example() {
  const toast = useToast();

  return (
    <Button
      onClick={() => {
        const id = toast.show({
          title: "Done!",
          text: "You can start using the dashboard now.",
          icon: IconZap,
          actionsSlot: <Button onClick={() => toast.hide(id)}>Undo</Button>,
        });
      }}
    >
      Grant access
    </Button>
  );
}

Toast supports 5 colors based on the color tokens available in the system. By default, it uses an inverted color, which means it's rendered with a dark background in light mode and a light background in dark mode. Additionally, colors can be set to neutral, primary, positive, and critical to highlight the status of the performed action.

function Example() {
  const [color, setColor] = React.useState("inverted");
  const toast = useToast();

  return (
    <View gap={3} direction="row" align="center">
      <Select
        value={color}
        onChange={({ value }) => setColor(value)}
        options={[
          { label: "Inverted", value: "inverted" },
          { label: "Neutral", value: "neutral" },
          { label: "Primary", value: "primary" },
          { label: "Positive", value: "positive" },
          { label: "Critical", value: "critical" },
          { label: "Warning", value: "warning" },
        ]}
      />
      <Button
        onClick={() => {
          const id = toast.show({
            text: "Notification sent",
            icon: IconZap,
            actionsSlot: <Button onClick={() => toast.hide(id)}>Undo</Button>,
            color,
          });
        }}
      >
        Show notification
      </Button>
    </View>
  );
}

By default, all toasts are shown in the bottom-end region of the screen. When calling the show method, you can pass one of the other available positions.

function Example() {
  const toast = useToast();

  return (
    <Button
      onClick={() => {
        const id = toast.show({
          text: "Notification sent",
          icon: IconZap,
          actionsSlot: <Button onClick={() => toast.hide(id)}>Undo</Button>,
          position: "top",
        });
      }}
    >
      Show notification
    </Button>
  );
}

You can customize the timeout option for toasts with more content. By default, it comes with the short value, which is 4s. You can change it to long or a custom ms value. Passing 0 timeout disables the auto-dismissing of the toast.

function Example() {
  const toast = useToast();

  return (
    <Button
      onClick={() => {
        const id = toast.show({
          text: "Notification sent",
          icon: IconZap,
          actionsSlot: <Button onClick={() => toast.hide(id)}>Dismiss</Button>,
          timeout: 0,
        });
      }}
    >
      Show notification
    </Button>
  );
}

Toasts support global options per screen region passed through the Reshaped provider. For every region, you can define the area's width and disable the stacking behavior.

<Reshaped
  toastOptions={{
    'bottom-start': { width: "460px", expanded: true }
  }}
>
  ...
</Reshaped>

Depending on the content and custom elements you pass to the toast, you can change its layout with the size property.

• small size renders the title, text, and actions on the same line. Small size is an excellent option for short notification messages and is used by default.
• medium size renders the title above the text while keeping actions on the end side of the toast. Medium size works great for detailed notifications where you have more text content and use startSlot with custom elements.
• large size renders the title, text, and actions as a vertical stack of elements. Large size is great to use when building custom layouts for promotion banners.

function Example() {
  const [size, setSize] = React.useState("small");
  const toast = useToast();

  return (
    <View gap={3} direction="row" align="center">
      <Select
        value={size}
        onChange={({ value }) => setSize(value)}
        options={[
          { label: "Small", value: "small" },
          { label: "Medium", value: "medium" },
          { label: "Large", value: "large" },
        ]}
      />
      <Button
        onClick={() => {
          const id = toast.show({
            title: "Notification title",
            text: "Notification message",
            icon: IconZap,
            actionsSlot: <Button onClick={() => toast.hide(id)}>Undo</Button>,
            size,
          });
        }}
      >
        Show notification
      </Button>
    </View>
  );
}

actionsSlot can be used with any actionable elements, but if you're using it with the Button component, Toast will provide reasonable defaults for their style properties. When used for displaying multiple actions, you can pass them as an array instead of using a React.Fragment

function Example() {
  const toast = useToast();

  return (
    <Button
      onClick={() => {
        const id = toast.show({
          text: "Notification sent",
          actionsSlot: [
            <Button onClick={() => toast.hide(id)}>Undo</Button>,
            <Button onClick={() => toast.hide(id)}>Dismiss</Button>,
          ],
        });
      }}
    >
      Show notification
    </Button>
  );
}

Instead of displaying an icon, you can display a custom element using a startSlot property. It's only displayed if the icon is not passed.

function Example() {
  const toast = useToast();

  return (
    <Button
      onClick={() => {
        const id = toast.show({
          startSlot: <Avatar initials="RS" color="primary" size={10} />,
          text: "Reshaped has logged in",
          color: "neutral",
        });
      }}
    >
      Show notification
    </Button>
  );
}

Instead of using the default toast layout, you can render a custom React layout inside the toast container. This approach can be used when you need to build promotion banners, cookie notices, and other layouts.

function Example() {
  const toast = useToast();

  return (
    <Button
      onClick={() => {
        const id = toast.show({
          children: (
            <View gap={3} direction="row">
              <View aspectRatio={1 / 1}>
                <Image
                  height="100px"
                  src="/img/examples/architecture-4.webp"
                  borderRadius="medium"
                />
              </View>
              <View.Item grow>
                <View gap={1}>
                  <Dismissible
                    closeAriaLabel="Close notification"
                    onClose={() => toast.hide(id)}
                  >
                    <Text variant="body-strong-1">Say thanks! 🙌</Text>
                  </Dismissible>
                  <Text variant="body-2">
                    Give a shoutout to the author on social media or copy the
                    text below to attribute.
                  </Text>
                  <View.Item gapBefore={2}>
                    <View
                      padding={2}
                      borderColor="neutral-faded"
                      backgroundColor="neutral-faded"
                    >
                      Photo by Pierre Châtel-Innocenti
                    </View>
                  </View.Item>
                </View>
              </View.Item>
            </View>
          ),
          color: "neutral",
          position: "bottom-start",
          timeout: 0,
        });
      }}
    >
      Show promotion banner
    </Button>
  );
}

You can render notifications based on the boundaries of a specific element with a ToastProvider. All useToast calls inside the provider will be bound to its dimensions.

• Make sure to wrap it with an element that has position: relative, like the View utility.
• Since ToastProvider creates a new context boundary, useToast calls should happen inside its children components. Otherwise, your notifications will still be rendered in the body element.

function Boundary() {
  const ChildComponent = () => {
    const toast = useToast();

    return (
      <Button
        onClick={() => {
          toast.show({
            text: "Notification sent",
          });
        }}
      >
        Show notification
      </Button>
    );
  };

  return (
    <View padding={10}>
      <View backgroundColor="neutral-faded" padding={10} borderRadius="medium">
        <ToastProvider>
          <ChildComponent />
        </ToastProvider>
      </View>
    </View>
  );
}

• Toast automatically announces its text content for screen readers and manages the focus by adding the focusable toast elements right after the currently focused element in the focus queue.
• When using toasts without a timeout, provide a close button. If this button doesn't have a text label, add an aria-label for screen readers.