PineUiPhoenix.Toast (Pine UI v0.1.3)

View Source

Provides 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

container(assigns)

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)

toast(assigns)

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)

trigger(assigns)

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")