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 Component() {
const toast = useToast();
return (
<Button
onClick={() => {
const id = toast.show({
title: "Done!",
text: "You can start using the dashboard now.",
icon: CheckCheckIcon,
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.
<Button
onClick={() => {
const id = toast.show({
text: "Notification sent",
icon: CheckCheckIcon,
actionsSlot: <Button onClick={() => toast.hide(id)}>Undo</Button>,
color,
});
}}
>
Show notification
</Button>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 Component() {
const toast = useToast();
return (
<Button
onClick={() => {
const id = toast.show({
text: "Notification sent",
icon: CheckCheckIcon,
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 Component() {
const toast = useToast();
return (
<Button
onClick={() => {
const id = toast.show({
text: "Notification sent",
icon: CheckCheckIcon,
actionsSlot: <Button onClick={() => toast.hide(id)}>Dismiss</Button>,
timeout: 0,
});
}}
>
Show notification
</Button>
);
}Depending on the content and custom elements you pass to the toast, you can change its width with a short / long aliases or by passing a literal px value.
function Component() {
const toast = useToast();
return (
<Button
onClick={() => {
const id = toast.show({
text: "Notification sent",
width: "long",
});
}}
>
Show notification
</Button>
);
}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. You can also change the layout orientation to vertical to display actions below the text.
function Component() {
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 Component() {
const toast = useToast();
return (
<Button
onClick={() => {
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 Component() {
const toast = useToast();
return (
<Button
onClick={() => {
const id = toast.show({
children: (
<View gap={4} 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-1" weight="bold">
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"
borderRadius="small"
>
Photo by Pierre Châtel-Innocenti
</View>
</View.Item>
</View>
</View.Item>
</View>
),
color: "neutral",
position: "bottom-start",
timeout: 0,
width: "long",
});
}}
>
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.
const ChildComponent = () => {
const toast = useToast();
return (
<Button
onClick={() => {
toast.show({
text: "Notification sent",
});
}}
>
Show notification
</Button>
);
};
function Component() {
return (
<View padding={10}>
<View backgroundColor="neutral-faded" padding={10} borderRadius="medium">
<ToastProvider>
<ChildComponent />
</ToastProvider>
</View>
</View>
);
}