glaze_oat - v1.0.0

glaze_oat/button

Oat documentation: https://oat.ink/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_oat/button
import lustre/element/html

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

A grouped action row

import glaze_oat/button
import lustre/element/html

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

A link styled as button

import glaze_oat/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)

Render a button for in-page actions.

Use this for actions like submit, save, open, or confirm.

danger

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

ghost

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

group

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

Render buttons as an action group.

Use this when actions are related and should be visually grouped.

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 button styling on a custom element.

This is mostly useful in advanced cases.

large

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

Render a link (<a>) styled like a button.

Use this for navigation actions rather than state-changing actions.

outline

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

primary

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

secondary

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

small

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