Toast

A component that displays brief, non-disruptive messages to users. Provides a system for showing temporary notifications that automatically dismiss after a set duration. Implements proper focus management and gesture support for optimal user experience. Messages can be triggered from anywhere in the application through a provider component.

Automatically closes after configurable duration

Supports keyboard navigation and focus management

Supports closing via swipe gesture

Can be triggered from anywhere in the application

Architecture

so-toast-provider
Slot: default Place here the app content to subscribe to toast provider's workflow 'showToast'.
Slot: default Place the so-toast within the sc-toast-portal and sc-toast-region.
so-toast

Reference

  • Provider

    The root container that manages the state and behavior of the toast system. Coordinates the creation, display and dismissal of toast messages throughout the application.

  • Toast

    The container component that displays an individual toast message. Manages its own visibility state, animation and interaction handling.

Keyboard

  • F8

    When pressed, moves focus to the first available toast message in the region.

  • Tab

    Moves focus to the next focusable element within the toast message.

  • Shift+Tab

    Moves focus to the previous focusable element within the toast message.

  • Space

    When focus is on a toast close button, dismisses the toast message.

  • Enter

    When focus is on a toast close button, dismisses the toast message.

  • Escape

    When focus is on any element within a toast message, dismisses that toast.

made for toddle