components avatar

components/avatar

Import: import { Avatar, AvatarGroup } from "@tundralibs/ui/avatar"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Avatar

Avatar(props: AvatarProps): Html

AvatarGroup

AvatarGroup(props: { avatars: Html[]; attrs?: Attrs }): Html

Types

AvatarSize

• "sm"
• "md"
• "lg"

AvatarProps

Prop	Type	Required	Description
src	string
alt	string
initials	string
size	AvatarSize
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A person, by photo or initials

Avatar({ src: "/photos/ada.jpg", alt: "Ada Lovelace", size: "md" })

<span class="avatar">
  <img src="/photos/ada.jpg" alt="Ada Lovelace">
</span>

Who is on the project

AvatarGroup({ avatars: [Avatar({ initials: "AL" }), Avatar({ initials: "GH" }), Avatar({ initials: "+3" })] })

<div class="avatar-group">
  <span class="avatar">AL</span>
  <span class="avatar">GH</span>
  <span class="avatar">+3</span>
</div>

CSS hooks

Classes defined by components/avatar/avatar.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.avatar, .avatar--lg, .avatar--sm, .avatar-group