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.
Using 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.
With React Aria
React Aria provides the useToast hook that can be used with Joy UI's Alert component.
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).