glaze/basecoat/alert

Basecoat documentation: https://basecoatui.com/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 typically a container with optional icon, title, and description content.

Recipes

A basic alert

import glaze/basecoat/alert
import lustre/element/html

fn info_alert() {
  alert.alert([], [
    alert.title([], [html.text("Heads up")]),
    alert.description([], [html.text("This setting applies to all projects.")]),
  ])
}

A destructive alert

import glaze/basecoat/alert
import lustre/element/html

fn delete_warning() {
  alert.destructive([], [
    alert.title([], [html.text("Delete project")]),
    alert.description([], [html.text("This action cannot be undone.")]),
  ])
}

Variants

• destructive

References

• MDN ARIA alert role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role

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

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

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

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

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