PineUiPhoenix.Toast (Pine UI v0.1.3)
View SourceProvides toast notification components for displaying temporary messages.
The Toast module offers components for creating non-intrusive notifications that appear temporarily and automatically dismiss after a configurable period.
Summary
Functions
Renders a toast notification container.
Renders a standalone toast notification.
Renders a button that triggers a toast notification.
Functions
Renders a toast notification container.
This component creates a container for toast notifications. It's designed to be placed at the root of your application layout.
Examples
<.container />
<.container
position="bottom-right"
transition="slide"
/>
Options
:position
- Position of the toasts: "top-right", "top-left", "bottom-right", "bottom-left", "top-center", "bottom-center" (optional, defaults to "top-right"):transition
- Animation style: "fade", "slide", "zoom" (optional, defaults to "fade"):max_toasts
- Maximum number of toasts to show at once (optional, defaults to 5):class
- Additional CSS classes for the container (optional)
Renders a standalone toast notification.
This component creates a single toast notification that can be shown directly in the UI (not via the notification system).
Examples
<.toast
type="success"
title="Success!"
message="Your changes have been saved."
/>
<.toast
type="error"
message="Failed to save changes."
dismissable={true}
/>
Options
:type
- Toast type: "default", "success", "error", "warning", "info" (optional, defaults to "default"):title
- Toast title text (optional):message
- Toast message text (required):icon
- HTML string for custom icon (optional, for default type only):dismissable
- Whether the toast can be dismissed (optional, defaults to false):class
- Additional CSS classes for the toast (optional)
Renders a button that triggers a toast notification.
This component creates a button that shows a toast notification when clicked.
Examples
<.trigger
label="Show Success Toast"
type="success"
title="Success!"
message="Operation completed successfully."
/>
Options
:label
- Button text (required):type
- Toast type: "default", "success", "error", "warning", "info" (optional, defaults to "default"):title
- Toast title text (optional):message
- Toast message text (required):duration
- Duration in milliseconds before auto-dismiss (optional, defaults to 5000, set to 0 to disable):position
- Position override for the toast (optional):button_class
- CSS classes for the button (optional):button_variant
- Button variant: "primary", "secondary", "outline" (optional, defaults to "primary")