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

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.

Without Icon

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 Position

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

Slots

Toast has the following slots:

• base: The main toast container element
• title: The title element
• description: The description element
• icon: The icon element
• content: The wrapper for the title, description and icon content
• progressBar: The progressBar element that display timer to close the toast.
• progressTrack: The track of the progressBar.
• progressIndicator: The indicator of the progressBar.
• closeButton: The close button element

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