glaze_oat/badge

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

The badge element, sometimes called a “tag”, is used to attach short contextual information to nearby content.

Common examples include labels like “New”, “Beta”, “Paid”, or status chips in lists and cards.

Anatomy

A badge is a compact inline container for short labels. In practice this is usually a single word or short phrase, sometimes with an icon.

Recipes

A basic badge

import glaze_oat/badge
import lustre/element/html

fn new_label() {
  badge.badge([], [html.text("New")])
}

A success badge

import glaze_oat/badge
import lustre/element/html

fn sync_status() {
  badge.badge([badge.success()], [html.text("Synced")])
}

Values

badge

</>

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

Render a badge.

Use this for compact labels such as “New”, “Beta”, or status text.

danger

</>

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

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

This is useful when your markup needs a different wrapper tag.

outline

</>

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

secondary

</>

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

success

</>

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

warning

</>

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