Kino.Toast (kino_toast v0.1.2)
View SourceA Kino component for displaying toast-style notifications in Elixir Livebook apps. This module provides a simple way to create and manage toast notifications with various styles such as info, success, warning, and error.
Usage
To use this module, you can create a new toast instance and queue notifications:
toast = Kino.Toast.new(max_toasts: 5, dismiss_after: 5000)
Kino.Toast.queue(toast, Kino.Toast.info("This is an info message"))
Kino.Toast.queue(toast, Kino.Toast.success("Operation completed successfully!"))
Toast Types
Kino.Toast.info/2
: Creates an info toast with default styling.Kino.Toast.success/2
: Creates a success toast with default styling.Kino.Toast.warning/2
: Creates a warning toast with default styling.Kino.Toast.error/2
: Creates an error toast with default styling.Kino.Toast.custom/2
: Creates a custom toast with optional icon or emoji.
Options
:max_toasts
- Maximum number of toasts to display at once (default: 3).:dismiss_after
- Time in milliseconds after which the toast will automatically dismiss (default: 3000).
Example
toast = Kino.Toast.new(max_toasts: 5, dismiss_after: 5000)
Kino.Toast.queue(toast, Kino.Toast.info("This is an info message"))
Kino.Toast.queue(toast, Kino.Toast.success("Operation completed successfully!"))
Kino.Toast.queue(toast, Kino.Toast.warning("This is a warning message"))
Kino.Toast.queue(toast, Kino.Toast.error("An error occurred!"))
Kino.Toast.queue(toast, Kino.Toast.custom("Custom toast with icon", icon: "bell", background_color: "#f0f0f0", text_color: "#333"))
Customization
You can customize the appearance of toasts by providing options such as :icon
, :emoji
, :background_color
,
and :text_color
when creating a custom toast. The default styles can also be overridden by passing these options
to the respective toast functions.
Summary
Functions
Creates a custom toast with optional icon or emoji.
Creates an error toast with default styling.
Creates an info toast with default styling.
Creates a new instance of the Kino.Toast component.
Enqueue one or more toasts to the toast container.
Creates a success toast with default styling.
Creates a warning toast with default styling.
Functions
Creates a custom toast with optional icon or emoji.
Options:
- :icon - FontAwesome icon class (e.g. "bell")
- :emoji - Emoji character (e.g. "🔔")
- :background_color - background color hex or CSS color string (default: "#fff")
- :text_color - text color hex or CSS color string (default: "#000")
If both :icon and :emoji are provided, raises ArgumentError.
Creates an error toast with default styling.
To customize, use Kino.Toast.custom/2
.
Creates an info toast with default styling.
To customize, use Kino.Toast.custom/2
.
Creates a new instance of the Kino.Toast component.
Enqueue one or more toasts to the toast container.
Creates a success toast with default styling.
To customize, use Kino.Toast.custom/2
.
Creates a warning toast with default styling.
To customize, use Kino.Toast.custom/2
.