Skip to main contentSkip to docs navigation
View on GitHub

Avatar

Avatars are are typically used to display a user profile as a picture or short text. They can be used in various contexts, such as in lists, groups, or as buttons.

On this page
@layer components
Context tokens

Usage

Use the .avatar class to create an avatar. The .avatar-image class is used for images, while .avatar-text is used for text.

CX Profile picture
HTML
<span class="avatar">CX</span>
<span class="avatar">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture" />
</span>

Sizes

Use the 2xs, xs, sm, md, lg, xl, 2xl classes to set the size of the avatar. You can also use the --cx-avatar-size CSS variable to set a custom size.

CX CX CX CX CX CX CX CX CX
HTML
<span class="avatar 2xs">CX</span>
<span class="avatar xs">CX</span>
<span class="avatar sm">CX</span>
<span class="avatar md">CX</span>
<span class="avatar lg">CX</span>
<span class="avatar xl">CX</span>
<span class="avatar 2xl">CX</span>
<span class="vr mx-md"></span>
<span class="avatar" style="--cx-avatar-size: 1.75rem;">CX</span>
<span class="avatar" style="--cx-avatar-size: 4.25rem;">CX</span>
Profile picture Profile picture Profile picture Profile picture Profile picture Profile picture Profile picture Profile picture Profile picture
HTML
<span class="avatar 2xs"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar xs"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar sm"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar md"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar lg"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar xl"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar 2xl"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="vr mx-md"></span>
<span class="avatar" style="--cx-avatar-size: 1.75rem;"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar" style="--cx-avatar-size: 4.25rem;"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>

Buttons

Use the button tag with .avatar class to create an avatar button.

HTML
<button class="avatar" type="button">CX</button>
<button class="avatar" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
</button>

Use the anchor tag with .avatar class to create an avatar link.

CX Profile picture
HTML
<a class="avatar" href="#">CX</a>
<a class="avatar" href="#">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
</a>

Colors

Use with a context color class to create an avatar with a background color.

HTML
<button class="avatar default" type="button">CX</button>
<button class="avatar alternate" type="button">CX</button>
<button class="avatar primary" type="button">CX</button>
<button class="avatar secondary" type="button">CX</button>
<button class="avatar neutral" type="button">CX</button>
<button class="avatar danger" type="button">CX</button>
<button class="avatar success" type="button">CX</button>
<button class="avatar warning" type="button">CX</button>
<button class="avatar info" type="button">CX</button>
<button class="avatar black" type="button">CX</button>
<button class="avatar white" type="button">CX</button>
HTML
<button class="avatar smooth default" type="button">CX</button>
<button class="avatar smooth alternate" type="button">CX</button>
<button class="avatar smooth primary" type="button">CX</button>
<button class="avatar smooth secondary" type="button">CX</button>
<button class="avatar smooth neutral" type="button">CX</button>
<button class="avatar smooth danger" type="button">CX</button>
<button class="avatar smooth success" type="button">CX</button>
<button class="avatar smooth warning" type="button">CX</button>
<button class="avatar smooth info" type="button">CX</button>
<button class="avatar smooth black" type="button">CX</button>
<button class="avatar smooth white" type="button">CX</button>

Badges

Use the .badge class to create a badge on top of the avatar. Use position utilities to position the badge.

HTML
<button class="avatar" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge success circle"><span class="visually-hidden">Online</span></span>
</button>
<button class="avatar" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge danger circle"><span class="visually-hidden">Offline</span></span>
</button>
<button class="avatar" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge warning circle"><span class="visually-hidden">Away</span></span>
</button>
<button class="avatar" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge neutral circle"><span class="visually-hidden">Busy</span></span>
</button>

Badge size scales with the avatar size, so you can use badges on different sized avatars.

HTML
<button class="avatar 2xs" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge success circle"><span class="visually-hidden">Online</span></span>
</button>
<button class="avatar xs" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge success circle"><span class="visually-hidden">Online</span></span>
</button>
<button class="avatar sm" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge success circle"><span class="visually-hidden">Online</span></span>
</button>
<button class="avatar md" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge success circle"><span class="visually-hidden">Online</span></span>
</button>
<button class="avatar lg" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge success circle"><span class="visually-hidden">Online</span></span>
</button>
<button class="avatar xl" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge success circle"><span class="visually-hidden">Online</span></span>
</button>
<button class="avatar 2xl" type="button">
  <img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/>
  <span class="badge success circle"><span class="visually-hidden">Online</span></span>
</button>

Stacks

Use the .avatar-stack class to create a group of avatars. Use the .avatar class for each avatar in the group. Set the --cx-avatar-stack-spacing CSS variable to set the overlap of the avatars.

HTML
<div class="avatar-stack">
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=22" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=49" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=62" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=8" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=63" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=15" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=22" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=32" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=63" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>

Use size classes on the stack to set the size of all avatars in the stack.

HTML
<div class="avatar-stack 2xs">
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=51" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=50" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=46" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=19" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>
<div class="avatar-stack xs">
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=39" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=21" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=8" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=30" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>
<div class="avatar-stack sm">
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=39" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=43" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=34" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=3" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>
<div class="avatar-stack md">
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=16" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=6" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=34" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=41" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>
<div class="avatar-stack lg">
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=60" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=54" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=56" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=31" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>
<div class="avatar-stack xl">
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=47" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=2" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=3" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=24" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>
<div class="avatar-stack 2xl">
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=22" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=7" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=37" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=31" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>