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.

• 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