Text overflow

When the text is too long for the available horizontal space, it wraps to form another line. In actionable toasts, the button moves below the text prior to text wrapping.

Multiple toasts

The default state can display up to three toasts at a time. To view additional toasts beyond this limit, users can click the "Show all" action button. Alternatively, they can reveal remaining toasts by interacting with a button or dismissing the component. Additionally, hovering over the upper part of the toasts triggers a subtle animation, signaling to the user that the group can be fully expanded.

The expanded state displays a minimum of two toasts with a visible scroll indicator, while the maximum number adapts based on screen size. Users can either dismiss the toasts or collapse them back to the previous state. To enhance contrast, an overlay is applied beneath the group, similar to components like takeover dialogs. In the React Spectrum implementation, the action button group has a fixed light theme, as switching modes significantly reduces contrast.

Please refer to more multiple toasts usage guideline below.