Toast

The toast is a feedback component notify the user after an action.

Import

import { Toast } from '@backyard-ui/core';

This component will render all toasts.

<Toaster position="top-center" gutter={8} />

Use the appearance prop to change the visual semantic.

By default variant prop is neutral but you can use solid or subtle to get a different style.

Use the isClosable prop to show the close button.

To use a custom icon, pass the icon you choose to AlertIcon.

You can use toast.custom to create a custom toast.

Use toast.promise to mapping a promise to a toast. It will update automatically when the promise resolves or fails.