badge

The [badge] element, sometimes called a “tag”, is commonly used to attach a small piece of information to some other element. You might use a badge to indicate the type of a product in a grid, or to annotate something as “new” or “updated”.

Anatomy

A badge is made up of only one part:

The main badge container used to apply the badge styles. Often the only direct child of the container is the text used for the badges label, but it may also be an icon.

When empty, the badge container becomes a circle and can be used as a status indicator.

Recipes

Below are some recipes that show common uses of the badge element.

An online avator indicator

This example uses Tailwind CSS for some additional styling.

import lustre/attribute
import lustre/element/html
import lustre/ui/badge.{badge}

pub fn online_avatar(src) {
  html.div([attribute.class("inline-block relative")], [
    html.img([attribute.class("size-6 rounded-full"), attribute.src(src)]),
    badge([
      badge.background("green"),
      badge.solid(),
      attribute.class("absolute top-0 right-0"),
      attribute.title("online")],
      []
    )
  ])
}

Customisation

It is possible to control many aspects of a badge’s styling through CSS variables. You may want to do this in cases where you are integrating lustre/ui into an existing design system and you want the badge element to match elements outside of this package, or to apply custom colours outside of your theme.

The following CSS variables can be set in your own stylesheets or by using the corresponding attribute functions in this module:

--background --background-hover --border --border-hover --padding-x --padding-y --radius --text

Functions

background

</>

pub fn background(value: String) -> Attribute(a)

background_hover

</>

pub fn background_hover(value: String) -> Attribute(a)

badge

</>

pub fn badge(
  attributes: List(Attribute(a)),
  children: List(Element(a)),
) -> Element(a)

This will render a <small> tag in your markup. If you would like to render a different element, use of instead.

border

</>

pub fn border(value: String) -> Attribute(a)

border_hover

</>

pub fn border_hover(value: String) -> Attribute(a)

border_width

</>

pub fn border_width(value: String) -> Attribute(a)

danger

</>

pub fn danger() -> Attribute(a)

Adjust the badge’s colour to match your theme’s danger colour palette.

indicator

</>

pub fn indicator(attributes: List(Attribute(a))) -> Element(a)

Render a badge as a small circle with no content. This can be used as a status or online indicator.

of

</>

pub fn of(
  element: fn(List(Attribute(a)), List(Element(a))) -> Element(a),
  attributes: List(Attribute(a)),
  children: List(Element(a)),
) -> Element(a)

Render the given element function as a badge. The default badge element is html.small; this function can be used to render an alternative element like html.button or html.a.

outline

</>

pub fn outline() -> Attribute(a)

Render a badge with just an online.

padding

</>

pub fn padding(x: String, y: String) -> Attribute(a)

padding_x

</>

pub fn padding_x(value: String) -> Attribute(a)

padding_y

</>

pub fn padding_y(value: String) -> Attribute(a)

pill

</>

pub fn pill() -> Attribute(a)

Set the badges’s border radius to your theme’s xl radius value. This is shorthand for radius(theme.radius.xl).

primary

</>

pub fn primary() -> Attribute(a)

Adjust the badge’s colour to match your theme’s primary colour palette.

radius

</>

pub fn radius(value: String) -> Attribute(a)

round

</>

pub fn round() -> Attribute(a)

Set the badges’s border radius to your theme’s md radius value. This is shorthand for radius(theme.radius.md).

secondary

</>

pub fn secondary() -> Attribute(a)

Adjust the badge’s colour to match your theme’s secondary colour palette.

soft

</>

pub fn soft() -> Attribute(a)

Render a badge with a softer background colour.

solid

</>

pub fn solid() -> Attribute(a)

Render a badge with a bold solid background colour.

square

</>

pub fn square() -> Attribute(a)

Remove the badge’s border radius, regardless of your theme configuration. This is shorthand for radius("0").

success

</>

pub fn success() -> Attribute(a)

Adjust the badge’s colour to match your theme’s success colour palette.

text

</>

pub fn text(value: String) -> Attribute(a)

warning

</>

pub fn warning() -> Attribute(a)

Adjust the badge’s colour to match your theme’s warning colour palette.