Snackbar

The Snackbar, also commonly referred to as Toast, component informs users that an action has been or will be performed by the app.

Integration with headless UI libraries

In the meantime, you can still adopt Joy UI today for building a snackbar!

This document shows how to construct it with existing Joy UI components combined with popular headless UI libraries.

Parting from the Alert component

Joy UI's Alert component is perfect for building a snackbar (or toast) because of the default role—alert and support for decorators.

With Radix UI

Using Joy UI's Alert component as a starting point, pass Radix UI's Toast to component prop. Radix will enhance the functionalities by preserving the styles of Joy UI components.

Animation is created by targeting data-* attributes injected by Radix UI's Toast.Root component. In this demo, it uses @mui/system keyframes API, same as emotion's keyframes, to build the animation stylesheet.

• Install Radix UI's Toast
• Toast component documentation

With React Aria

React Aria provides the useToast hook that can be used with Joy UI's Alert component.

• Install React Aria's Toast
• Toast component documentation

With Sonner

Sonner, an opinionated toast component for React, comes with features like stackable toasts and swipe-to-dismiss animation.

To use Sonner with Joy UI, override Sonner's CSS variables with Joy UI color tokens by targeting [data-sonner-toaster][data-theme] selector.

You can also pass Joy UI's Alert component to toast.custom() to fully control the structure of the notification.

Lastly, it is also possible to enhance Sonner's toast function with a new method that closely resemble Joy UI's semantics (i.e.: adding a warning toast).

• Sonner documentation