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 @nextui-org/react is already installed globally.

Import

Note: Before using the addToast function, ensure you have added ToastProvider to your application (or the relevant part of it). This is necessary to initialize the context for managing toasts.

Usage

With Description

Colors

Toast comes with 6 color variants to convey different meanings.

Variants

Radius

Custom Icon

By default, Toast displays an appropriate icon based on the color prop. You can override this by providing a custom icon using the icon prop.

Icon Hidden

You can hide the icon by setting the hideIcon prop to true.

With Action

Toast supports an endContent prop for additional actions.

With Timeout

Toast supports an endContent prop for additional actions.

Toast Placement

Disable Animation

Promise

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