Kino.Toast (kino_toast v0.1.0)

View Source

A 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

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.

Creates a success toast with default styling.

Creates a warning toast with default styling.

Functions

custom(html, opts \\ [])

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.

error(html, opts \\ [])

Creates an error toast with default styling.

To customize, use Kino.Toast.custom/2.

info(html, opts \\ [])

Creates an info toast with default styling.

To customize, use Kino.Toast.custom/2.

new(opts \\ [])

Creates a new instance of the Kino.Toast component.

queue(toast, message)

success(html, opts \\ [])

Creates a success toast with default styling.

To customize, use Kino.Toast.custom/2.

warning(html, opts \\ [])

Creates a warning toast with default styling.

To customize, use Kino.Toast.custom/2.