Avatars

Image, initials, or placeholder fallback in five sizes; circle or rounded shape.

Preview

TW

React preview

LiveView (HEEx)

alias DesignSystem.UI.Avatars

<Avatars.avatar size="md" src={@user.avatar_url} alt={@user.name} />
<Avatars.avatar size="sm" initials="TW" />
<Avatars.avatar size="lg" shape="rounded" />

React (JSX)

import { Avatar } from "../ui/index.mjs"

<Avatar size="md" src={user.avatarUrl} alt={user.name} />
<Avatar size="sm" initials="TW" />
<Avatar size="lg" shape="rounded" />