toast

Basecoat documentation: https://basecoatui.com/components/toast/

Programmatic toast notifications.

Note: This component requires JavaScript from Basecoat.

Anatomy

Render a container once with toaster
Trigger notifications either by rendering toast markup, or by calling show to build a JavaScript snippet

Recipes

import glaze/basecoat/toast
import lustre/element/html

fn success_toast_markup() {
  toast.toast([toast.success()], [
    toast.title([], [html.text("Success")]),
    toast.description([], [html.text("Your changes have been saved.")]),
  ])
}

fn show_toast_script() {
  toast.show(toast.Config(toast.Success, "Success", "Saved!", None, None))
}

References

MDN ARIA status role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role
MDN CustomEvent: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

Types

Action

</>

Optional toast action button.

pub type Action {
  Action(label: String, onclick: option.Option(String))
}

Constructors

Action(label: String, onclick: option.Option(String))

Cancel

</>

Optional toast cancel button.

pub type Cancel {
  Cancel(
    label: option.Option(String),
    onclick: option.Option(String),
  )
}

Constructors

Cancel(
  label: option.Option(String),
  onclick: option.Option(String),
)

Config

</>

Configuration used by show.

pub type Config {
  Config(
    category: Category,
    title: String,
    description: String,
    action: option.Option(Action),
    cancel: option.Option(Cancel),
  )
}

Constructors

Config(
  category: Category,
  title: String,
  description: String,
  action: option.Option(Action),
  cancel: option.Option(Cancel),
)

Values

action_button

</>

pub fn action_button(
  label: String,
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

cancel_button

</>

pub fn cancel_button(
  label: String,
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

content

</>

pub fn content(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

description

</>

pub fn description(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

duration

</>

pub fn duration(ms: Int) -> attribute.Attribute(msg)

error

</>

pub fn error() -> attribute.Attribute(msg)

error_toast

</>

pub fn error_toast(title: String, description: String) -> String

</>

pub fn footer(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

info

</>

pub fn info() -> attribute.Attribute(msg)

show

</>

pub fn show(config: Config) -> String

show_simple

</>

pub fn show_simple(category: Category, title: String) -> String

success

</>

pub fn success() -> attribute.Attribute(msg)

success_toast

</>

pub fn success_toast(
  title: String,
  description: String,
) -> String

title

</>

pub fn title(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

toast

</>

pub fn toast(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

toaster

</>

pub fn toaster(
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

toaster_aligned

</>

pub fn toaster_aligned(
  align: String,
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

warning

</>

pub fn warning() -> attribute.Attribute(msg)