glaze/basecoat/avatar

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

Avatar helpers for user/profile images.

These helpers style regular <img> elements (and a few common fallbacks) so avatars look consistent across your UI.

Anatomy

• avatar / rounded: image-based avatar
• initials: text fallback
• group: stacked/overlapping avatar rows

Recipes

A user avatar

import glaze/basecoat/avatar
import lustre/attribute

fn user_avatar() {
  avatar.avatar([
    attribute.src("https://github.com/user.png"),
    attribute.alt("User name"),
  ])
}

An avatar group

import glaze/basecoat/avatar
import lustre/attribute

fn team_avatars() {
  avatar.group([], [
    avatar.avatar([attribute.src("https://github.com/user1.png"), attribute.alt("User 1")]),
    avatar.avatar([attribute.src("https://github.com/user2.png"), attribute.alt("User 2")]),
  ])
}

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

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

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

pub fn initials(
  text: String,
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

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

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

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