Toast

Toasts are temporary notifications that provide concise feedback about an action or event.

Installation

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

Import

Requirement

The ToastProvider must be added to the application's root (or the relevant part of it) before using the addToast function. This is required to initialize the context for managing toasts.

Usage

Colors

Toast comes with 6 color variants to convey different meanings.

Variants

Radius

Toast Placement

Custom Styles

You can customize the alert by passing custom Tailwind CSS classes to the component slots.

Data Attributes

Toast has the following attributes on the base element:

• data-has-title: When the toast has a title
• data-has-description: When the toast has a description
• data-animation: Shows the current animation of toast ("entering", "queued", "exiting", "undefined")
• data-placement: Where the toast is placed on the view-port.
• data-drag-value: Value by which the toast is dragged from it's original position. (This remains "0" in case of disabledAnimation)

Slots

Toast has the following slots:

• base: The main toast container element
• title: The title element
• description: The description element
• icon: The icon element
• loadingIcon: The icon to be displayed until promise is resolved/rejected.
• content: The wrapper for the title, description and icon content
• progressTrack: The track of the progressBar.
• progressIndicator: The indicator of the progressBar.
• closeButton: The close button element
• closeIcon: The icon which resides in the close button.

Accessibility

• Toast has role of alert
• All Toasts are present in ToastRegion.
• Close button has aria-label="Close" by default
• When no toast are present, ToastRegion is removed from the DOM

API

Toast Props

ToastProvider Props

Toast Events