button

Buttons, and the theme toggle built on them.

Types

Size

How big a button is.

pub type Size {
  ExtraSmall
  Small
  Medium
  Large
  Icon
  IconExtraSmall
  IconSmall
  IconLarge
}

Constructors

```
ExtraSmall
```
```
Small
```
```
Medium
```
```
Large
```
```
Icon
```
A square button for a single icon, as tall as a medium button. Give it an aria-label.
```
IconExtraSmall
```
A square icon button as tall as an extra-small one.
```
IconSmall
```
A square icon button as tall as a small one.
```
IconLarge
```
A square icon button as tall as a large one.

Variant

</>

How prominent a button is.

pub type Variant {
  Primary
  Secondary
  Outline
  Ghost
  Link
  Danger
}

Constructors

```
Primary
```
The main action: filled with the primary colour.
```
Secondary
```
A supporting action: filled with the muted colour.
```
Outline
```
A supporting action: outlined.
```
Ghost
```
A quiet action, such as one in a toolbar: filled only when hovered.
```
Link
```
An action that looks like a link.
```
Danger
```
A destructive action: filled with the danger colour.

Values

button_class

</>

pub fn button_class(variant: Variant) -> css.Class

The class of a medium button, for styling your own markup, such as a link, as a button.

classes

</>

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

sized

</>

pub fn sized(
  variant: Variant,
  size: Size,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A button of the given size.

These buttons do not submit a form; use submit for one that does. Passing attribute.type_("submit") instead would give the button two types, which a page and a live view resolve differently.

sized_class

</>

pub fn sized_class(variant: Variant, size: Size) -> css.Class

sized_submit

</>

pub fn sized_submit(
  variant: Variant,
  size: Size,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A button of the given size that submits its form.

theme_toggle

</>

pub fn theme_toggle(
  children: List(element.Element(msg)),
  from a: String,
  to b: String,
) -> element.Element(msg)

A button that switches the document between two named themes and remembers the choice in a theme cookie, which the page can read back with howdy/cookie. Works in server-rendered pages and live views. The switch is made by howdy/ui/behaviour, and the theme names stay in HTML-escaped data attributes, never executable code.