Toast Notifications
Last updated
Last updated
Toast notifications provide a way to display temporary, non-blocking notifications to users. They are especially useful for providing feedback after user actions like form submissions, API calls, or system events.
The toast system in this application uses for state management and for styling. Toasts can be displayed at different positions on the screen and with different statuses (info, success, warning, error).
The main components of the toast system are:
toast-container
: A component that displays all active toasts
Re-frame events for managing toasts
Re-frame subscriptions for accessing toast data
Toasts can be positioned in 9 different locations on the screen:
The default position is [:bottom :center]
.
To display a toast notification, dispatch one of the toast events with the appropriate data:
When dispatching a toast event, you can provide the following parameters:
:message
String
(required)
The message to display in the toast
:vertical
Keyword
:bottom
Vertical position (:top
, :middle
, :bottom
)
:horizontal
Keyword
:center
Horizontal position (:start
, :center
, :end
)
:timeout
Number (ms)
5000 (7000 for errors)
Time in milliseconds before toast auto-dismisses
:id
String/UUID
(auto-generated)
Unique identifier for the toast
There are four built-in toast types, each with its own color styling:
Info (:toast/info
): For general information and neutral messages
Success (:toast/success
): For confirming successful operations
Warning (:toast/warning
): For non-critical warnings
Error (:toast/error
): For error messages (stays visible longer)
You can customize how long a toast appears by setting the :timeout
parameter:
To remove a single toast programmatically, you need its ID and position:
To display toasts in your application, you need to include the toast container component in your app's root component:
For visual examples of different toast layouts and positions, refer to the toast scenes in the Portfolio:
The portfolio includes examples of:
Basic toast with alert
Toasts in all 9 positions
Interactive examples with buttons that trigger real toasts
The toast system is implemented in:
: Contains the re-frame events, subscriptions, and UI components
: Contains the base toast component