glaze_oat - v2.0.0

glaze/oat/alert

Oat documentation: https://oat.ink/components/alert/

The alert element, sometimes called a “callout”, is used to draw attention to important information without interrupting page flow.

Anatomy

An alert is usually a container with short, high-signal text. Most uses combine a title for the main message and an optional message for supporting detail.

Recipes

A title-only success alert

import glaze/oat/alert
import lustre/element/html

fn saved_notice() {
  alert.alert([alert.success()], [
    alert.title([], [html.text("Changes saved.")]),
  ])
}

A warning alert with title and message

import glaze/oat/alert
import lustre/element/html

fn warning_notice() {
  alert.alert([alert.warning()], [
    alert.title([], [html.text("Storage nearly full")]),
    alert.message([], [
      html.text("Delete unused files or upgrade your plan."),
    ]),
  ])
}

Variants

References

Values

alert

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

Render an alert container as a <div>.

This is a convenience wrapper around instance using html.div. The element includes role="alert" for accessible announcement behavior.

danger

</> 
pub fn danger() -> attribute.Attribute(msg)

Set data-variant="danger" on an alert.

Intended for destructive or high-severity states.

error

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

Set data-variant="error" on an alert.

Intended for failures or invalid states.

instance

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

Render an alert using a custom container element.

This is useful when you want semantic alternatives such as html.section while keeping the same alert role behavior.

The returned element always includes role="alert".

message

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

Render alert supporting content using <span>.

Use this for additional detail or explanation beneath/alongside the title.

success

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

Set data-variant="success" on an alert.

Intended for positive confirmations such as completed actions.

title

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

Render alert title content using <strong>.

Use this for short, high-signal summary text at the start of the alert.

warning

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

Set data-variant="warning" on an alert.

Intended for cautionary states that may need user attention.

✨ Search Document