Toast
A succinct message that is displayed temporarily. Toasts are triggered from client-side JavaScript and managed by a single Toaster placed in your layout.
Default
Click each button to trigger a different toast type.
Programmatic Dismissal
Dismiss individual toasts by ID or dismiss all at once.
Usage
julia
using Suite
# Place Toaster once in your layout (e.g. at the root)
Toaster(position="bottom-right")
# Toasts are triggered from client-side JavaScript:
# Suite.toast("Event created")
# Suite.toast.success("File uploaded")
# Suite.toast.error("Something went wrong")
# Suite.toast.warning("Low disk space")
# Suite.toast.info("Update available")
# Programmatic dismissal:
# Suite.toast.dismiss(id)
# Suite.toast.dismissAll()Notes
Toasts are entirely client-side. The Toaster component renders the container element; individual toasts are created and managed by the Suite.toast JavaScript API.
Place Toaster once in your root layout. Multiple toasters on the same page will result in duplicate notifications.
Each call to Suite.toast() returns a toast ID that can be passed to Suite.toast.dismiss(id) for programmatic dismissal.
API Reference
Toaster
| Prop | Type | Default | Description |
|---|---|---|---|
| position | String | "bottom-right" | Toast placement — "top-left", "top-right", "top-center", "bottom-left", "bottom-right", "bottom-center" |
| duration | Int | 4000 | Auto-dismiss duration in milliseconds |
| visible_toasts | Int | 3 | Maximum number of toasts visible at once |
| class | String | "" | Additional CSS classes |
Suite.toast (JS API)
| Method | Description |
|---|---|
| Suite.toast(message) | Show a default toast |
| Suite.toast.success(message) | Show a success toast |
| Suite.toast.error(message) | Show an error toast |
| Suite.toast.warning(message) | Show a warning toast |
| Suite.toast.info(message) | Show an info toast |
| Suite.toast.dismiss(id) | Dismiss a specific toast by its ID |
| Suite.toast.dismissAll() | Dismiss all visible toasts |