Kino.Toast (kino_toast v0.1.3)
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, first create a new toast instance:
container = Kino.Toast.new(max_toasts: 5, dismiss_after: 5000)
Then, you can queue toasts to be displayed:
Kino.Toast.queue(container, Kino.Toast.info("This is an info message"))
Kino.Toast.queue(container, Kino.Toast.success("Operation completed successfully!"))
Notes
- Do not immediately queue a toast after creating the instance, as it requires a moment to connect to the LiveView.
- If you have an idea for solving this, please open a pull request on the GitHub repository.
Instance 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).
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 an icon or emoji.
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.
Example of Custom Toast
Kino.Toast.custom("Custom toast with icon", icon: "bell", background_color: "#f0f0f0", text_color: "#333")
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
.