Toast

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

return (

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

You can display 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 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 dark background in light mode and a light background in dark mode. Additionally, color 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" },
        ]}
      />
      <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 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 UIC provider. For every region, you can define the area's width and disable the stacking behavior.

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

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

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: "UIC 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">
              <AspectRatio>
                <Image
                  height="100px"
                  src="/img/examples/architecture-4.webp"
                  borderRadius="medium"
                />
              </AspectRatio>
              <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>
  );
}