Chakra-UI

I♥️Components

Toast:

|

Chakra Docs

|

⦾ In the realm of digital interface design, a toast represents a compact, non-intrusive popup notification intended to furnish users with short, transient alerts or pieces of information. Typically, toasts are minor rectangular boxes, strategically positioned on the screen's corners or along the top or bottom edge.

Toasts aim to deliver critical or time-bound information without hindering the user's current tasks. They find extensive use in presenting a range of updates, including notifications, success acknowledgements, error reports, warnings, or other forms of feedback. They usually comprise a succinct message or status indicator and may optionally include an icon or action button.

The primary attributes of a toast include:

  • Succinctness: A toast tends to carry short, crisp messages designed to capture the user's attention effectively and communicate the intended information.
  • Non-interference: Toasts do not necessitate any user interaction and are designed to vanish automatically after a predetermined duration or upon user dismissal. They momentarily appear and avoid any disruptions to the user's ongoing actions.
  • Temporariness: Toasts serve as ephemeral notifications and do not persist on the screen. Their purpose is to deliver momentary information or feedback.
  • Responsiveness: Toasts are typically built to adapt to various screen sizes and devices, ensuring their visibility and readability across a range of screen resolutions.

The inclusion of toasts in web and mobile applications significantly improves the user experience by offering timely feedback and information. They play an important role in conveying important messages without disturbing the user's workflow or compelling them to divert from their current context.


The Chakra UI's Toast component provides all these benefits with a customizable and easy-to-use interface. It allows developers to display temporary, auto-dismissing alerts with various visual styles to indicate the nature of the notification. Moreover, it supports different positions on the screen and offers control over its behavior and duration.

To import the toast component into your project:

Examples

Simple Example

⦾ The toast will close itself when the close button is clicked, or after a timeout. Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time.
  • The useToast hook is called to obtain the toast function, which can be used to display the toast notification.
  • The component returns a Button component that triggers the toast notification when clicked.
  • When the button is clicked, the toast function is called with an object that specifies the configuration for the toast notification. The configuration includes properties such as title, description,status, duration, and isClosable.
  • The title property is set to "You did It!" to indicate a successful action.
  • The description property provides additional details about the action, stating "You made toast! Great work!"
  • The status property is set to "success" to determine the visual style of the toast.
  • The duration property sets the duration for which the toast should be displayed on the screen. In this example, it is set to 9000 milliseconds (9 seconds).
  • The isClosable property allows the user to manually close the toast notification.
  • The button's text is set as "Make Toast!".

Code

Custom Component Toast:

⦾ You can also create and display a custom component instead of the default Toast UI.

Code

Closing Toast Components:

⦾ Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method).

Code

Updating Toast Components:

⦾ Toasts' options can be updated, by passing an id and the new options to the update instance method.

Code

Toast Statuses

⦾ You can use status to change the overall representation of a toast.

Code

Variants on Toast

⦾ The Toast component has the same types of variants as the Alert component does.
  • subtle: A subtle variant with minimal visual impact.
  • solid: A solid background color variant with a border.
  • left-accent: A variant with a colored left accent border.
  • top-accent: A variant with a colored top accent border.

Code

Customizing the Container of the Toast:

⦾ The containerStyle property is available to override the default styles for this aspect of the toast.

Code

Positioning the Toast:

⦾ The position property allows you to specify where the toast will popup from.

Code

Preventing Duplicate Toast:

⦾ In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast(...).

Code

Did you know?

Creative Idea No. 1

Sequential Toasts: In certain cases, you may want to show a sequence of toasts, one after the other, to guide the user through a process or to narrate a story. This function is used to display a sequence of toast notifications, one after the other. This is achieved by using the forEach function in combination with setTimeout. Each toast is displayed after a delay calculated based on its index in the sequence array. When the button labeled "Show Steps" is clicked, the displaySequence function is triggered and the sequence of toasts begins. This can be particularly useful in scenarios where you want to guide users through a step-by-step process.

Code

Creative Idea No. 2

Toast with Countdown: You can incorporate a countdown within a toast to indicate the remaining time for a particular action. This can be particularly useful for timed quizzes, online exams, or other time-bound activities. This function demonstrates how to incorporate a countdown timer within a toast notification. On clicking the "Start Countdown" button, a toast with a title displaying a countdown from 10 is shown. The countdown timer is implemented using setInterval, and at each one-second interval, the countdown number decreases by one and the toast is updated with the new countdown number. When the countdown reaches zero, the interval is cleared and the toast is updated to show a "Countdown Complete!" message. This toast does not auto-close and does not show a close button until the countdown is complete.

Code

Creative Idea No. 3

Interactive Toasts: Toasts can contain buttons or other interactive elements to provide additional functionality. For instance, you can include a button that triggers another action directly from the toast. This function illustrates how to incorporate interactivity within a toast. On clicking the "Greet me" button, a toast notification is displayed with a custom render function. This function returns a button with a click handler that triggers another toast notification. The first toast message asks the user a question - "Would you like a cup of coffee?". This toast contains a button labeled "Yes, please!", which when clicked, triggers another toast notification with the message "Coffee on the way!". This shows how toast notifications can be made interactive by incorporating clickable elements within them.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.