Westy Design Systemv0.2.7
OverviewComponentsExamplesStorybook

Foundations

  • Typography
  • Colors
  • Spacing
  • Radius
  • Shadows
  • Icons

Components

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Direction
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kbd
  • Label
  • Menubar
  • Native Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Questionnaire
  • Radio Group
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toggle
  • Toggle Group
  • Tooltip

Chat

  • Attachment
  • Bubble
  • Marker
  • Message
  • Message Scroller

Components

Avatar

An image element with a fallback for representing the user.

Playground

CN
—size
—AvatarImage
—AvatarBadge
—AvatarGroup
Usage
Compose an Avatar from an AvatarImage and an AvatarFallback — the fallback renders while the image loads and whenever it fails. An optional AvatarBadge pins a status indicator to the bottom end of the avatar.
CN
import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@workspace/ui/components/avatar"

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
Fallback
When the image is missing or fails to load, the AvatarFallback takes its place — use initials or an icon. Pass delayMs to avoid a flash of the fallback on fast connections.
CN
<Avatar>
  <AvatarImage src="/broken-image.jpg" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

<Avatar>
  <AvatarFallback delayMs={600}>
    <UserIcon className="size-4" />
  </AvatarFallback>
</Avatar>
Sizes
Use the size prop to switch between sm (24px), default (32px) and lg (40px). The fallback text and badge scale along via data-size group selectors.
CNCNCN
<Avatar size="sm">
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

<Avatar size="lg">
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
Badge
AvatarBadge renders a status dot ringed with the background color. It defaults to bg-primary — override it with a token class like bg-destructive, and drop an icon inside on larger sizes (it is hidden on sm).
CNCNCN
<Avatar size="sm">
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge />
</Avatar>

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-destructive" />
</Avatar>

<Avatar size="lg">
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge>
    <CheckIcon />
  </AvatarBadge>
</Avatar>
Group
Wrap avatars in an AvatarGroup to overlap them — each avatar gains a ring-background separator so the stack stays readable over any surface.
CNVCER
<AvatarGroup>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
    <AvatarFallback>VC</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
    <AvatarFallback>ER</AvatarFallback>
  </Avatar>
</AvatarGroup>
Group count
Close a group with an AvatarGroupCount to summarize the remaining members — it accepts text or an icon and tracks the group size automatically via group-has-data-[size=*] selectors.
CNVC
+3
CNVC
<AvatarGroup>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
    <AvatarFallback>VC</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>

<AvatarGroup>
  {/* ... */}
  <AvatarGroupCount>
    <PlusIcon />
  </AvatarGroupCount>
</AvatarGroup>
With dropdown menu
Use an avatar as the trigger of a DropdownMenu for account menus — wrap it in a Button with size="icon" so it gets focus and hover treatment.
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="icon" className="rounded-full">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="start">
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
RTL
Set dir="rtl" on a wrapper or inherit it from a Direction provider — the AvatarBadge is pinned with end-0, so it flips to the bottom left automatically, and grouped avatars overlap in the opposite direction.
CN
CNVC
+3
<div dir="rtl" className="flex items-center gap-4">
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
    <AvatarFallback>CN</AvatarFallback>
    <AvatarBadge />
  </Avatar>
  <AvatarGroup>
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
    <Avatar>
      <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
      <AvatarFallback>VC</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>+3</AvatarGroupCount>
  </AvatarGroup>
</div>
API Reference
Avatar, AvatarImage and AvatarFallback wrap the Radix Avatar primitives and accept all of their props. AvatarBadge, AvatarGroup and AvatarGroupCount render plain elements and accept the matching HTML props.
PropTypeDefault
Avatar size"default" | "sm" | "lg""default"
AvatarImage src / altstring—
AvatarFallback delayMsnumber0
className (all parts)string—

Tokens used

9 design tokens consumed by the Avatar component.

  • --border

    Border

    after:border-border

  • --muted

    Muted

    bg-muted

  • --muted-foreground

    Muted Foreground

    text-muted-foreground

  • --primary

    Primary

    bg-primary

  • --primary-foreground

    Primary Foreground

    text-primary-foreground

  • --background

    Background

    ring-background*:data-[slot=avatar]:ring-background

  • --text-sm

    Text Small (14px)

    text-sm

  • --text-xs

    Text Extra Small (12px)

    group-data-[size=sm]/avatar:text-xs

  • --spacing

    Spacing unit (4px)

    size-8data-[size=sm]:size-6data-[size=lg]:size-10-space-x-2