Avatar
A person or team as a picture, falling back to initials
Presence
Online
Away
Busy
Offline
No presence shown
Sizes
xs · 20px
sm · 26px
md · 32px
lg · 40px
Fallback edges
GH
AL
?
🎨A
Picture and fallback
initials
Team
5 members · 1 online, 1 away, 1 busy, 1 offline
- Ada LovelaceMaintainerOnline
- Grace HopperCompilerBusy
- Alan TuringCompilerNo presence shown
- Katherine JohnsonFlight dynamicsAway
- Jean BartikENIACOffline
Installation
npx shadcn@latest add @sudokw/components-avatarimport { Avatar } from "@gpuixui/components";Usage
import { Avatar } from "@gpuixui/components/avatar";
<Avatar name="Ada Lovelace" src="/photos/ada.png" size="md" status="online" />;
// Without a picture the initials are derived from the name.
<Avatar name="Jean-Luc Picard" />;API reference
| Prop | Type | Default | Consequence |
|---|---|---|---|
name | string | — (required) | the accessible label and the initials' source |
src | string | — | a path, data URL or http(s) URL; without it the initials paint |
size | "xs" | "sm" | "md" | "lg" | "md" | the diameter from avatarSize; a stored name the scale does not carry falls back to md |
status | "online" | "away" | "busy" | "offline" | — | paints the dot and becomes the node's description; a stored name the union does not carry paints no dot |
color | string | the muted role | fills the disc |
initials | boolean | true | false paints a plain colour dot; the name stays the accessible one |
radius | number | a circle | a rounded square in place of the circle |
clickThrough | boolean | on, unless the avatar has its own press handler | lets a press fall through to the row, card or trigger the avatar sits in; an avatar given onClick keeps its press |
className | string | — | joined after the root recipe |
style | StyleDesc | (state) => StyleDesc | — | merged last |
Edit this page on GitHubapps/docs/content/docs/components/avatar.mdx