glaze_basecoat - v1.0.0

glaze/basecoat/button

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

The button helpers style interactive actions and links with a consistent API.

Use regular buttons for in-page actions, and use link when the interaction navigates to a different location.

Anatomy

A button setup usually has one interactive element and optional button groups. group wraps multiple actions in a semantic menu/list structure so spacing and alignment stay consistent.

Recipes

A primary action button

import glaze/basecoat/button
import lustre/element/html

fn save_button() {
  button.button([], [html.text("Save")])
}

A grouped action row

import glaze/basecoat/button
import lustre/element/html

fn actions() {
  button.group([], [
    button.button([button.outline()], [html.text("Cancel")]),
    button.button([], [html.text("Continue")]),
  ])
}

A link styled as button

import glaze/basecoat/button
import lustre/attribute
import lustre/element/html

fn docs_link() {
  button.link([attribute.href("/docs"), button.outline()], [
    html.text("Read docs"),
  ])
}

Variants

Sizes

Values

button

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

destructive

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

disabled

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

full_width

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

ghost

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

group

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

icon

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

icon_destructive

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

icon_outline

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

large

</> 
pub fn large() -> attribute.Attribute(msg)
</> 
pub fn link(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn link_destructive(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn link_ghost(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn link_outline(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn link_secondary(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn link_style(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

loading

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

outline

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

reset

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

secondary

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

small

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

submit

</> 
pub fn submit(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
✨ Search Document