Design System

Toast

Toasts are used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeoutโ€”the default is 5 seconds. Toasts are usually used to give feedback to users after an action has taken place.

React

We can use the Toast component with the custom hook useToast.

import { useToast } from '@hoverinc/design-system-react-web';

Position

By default the toast will be shown on the top right of the screen, but we can change it by passing the position prop.

Loading

Action

A toast can have a custom action button.

Loading

Color Scheme

A toast can either be 'light' or 'dark'.

Warning

Color Scheme is only supported in the Bauhaus theme

Loading

Image

A toast can display an image.

Warning

The image prop is only supported in the Bauhaus theme

Loading

Duration

By default the toast will be shown for 5 seconds, but we can change it by passing the duration prop.

Loading

States

A toast can be in a loading or error state.

Loading

On close complete

A function can run when the toast is closed.

Loading

Custom Content

To display custom content instead of the default description message and dismiss or action button, use the content variant and pass the custom content as the children prop.

The content variant will display an icon-based close button in the top right of the toast container.

Warning

The content variant is only supported in the Bauhaus theme. Pass a custom render function to render custom content in the legacy theme.

Loading

Toast Target

A toast can be rendered inside another component.

Loading

Copyright ยฉ 2025 Hover Inc. All Rights Reserved.