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 2xsmall, xsmall, small, medium, large, xlarge, 2xlarge 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 2xsmall">CX</span>
<span class="avatar xsmall">CX</span>
<span class="avatar small">CX</span>
<span class="avatar medium">CX</span>
<span class="avatar large">CX</span>
<span class="avatar xlarge">CX</span>
<span class="avatar 2xlarge">CX</span>
<span class="vr mx-medium"></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 2xsmall"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar xsmall"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar small"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar medium"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar large"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar xlarge"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="avatar 2xlarge"><img class="avatar-image" src="https://i.pravatar.cc/256" alt="Profile picture"/></span>
<span class="vr mx-medium"></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 2xsmall" 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 xsmall" 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 small" 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 medium" 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 large" 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 xlarge" 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 2xlarge" 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=33" alt="Profile picture"/>
  </button>
  <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=13" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=61" alt="Profile picture"/>
  </button>
  <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=6" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=45" 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">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=31" 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 2xsmall">
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=36" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=40" 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=58" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>
<div class="avatar-stack xsmall">
  <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=16" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=23" 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">+5</button>
</div>
<div class="avatar-stack small">
  <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=5" 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=54" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>
<div class="avatar-stack medium">
  <button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=18" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=57" alt="Profile picture"/>
  </button>
<button class="avatar" type="button">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=27" 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 large">
  <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=58" 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=25" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>
<div class="avatar-stack xlarge">
  <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=20" 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=9" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>
<div class="avatar-stack 2xlarge">
  <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">
    <img class="avatar-image" src="https://i.pravatar.cc/256?img=11" 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=7" alt="Profile picture"/>
  </button>
  <button class="avatar" type="button">+5</button>
</div>