• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Avatar

Component status
Contribution
Current version@spectrum-css/avatar@7.1.3
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/avatar@8.0.0-s2-foundations.13
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

An image representing a user.

An avatar image is wrapped in a link that uses the .spectrum-Avatar-link
class by default, however, an avatar may also be used without a link.
When disabled the avatar should only be used without a link.

Variants

Standard
Contribution

50

Avatar

75

Avatar

100 (default)

Avatar

200

Avatar

300

Avatar

400

Avatar

500

Avatar

600

Avatar

700

Avatar
Show markup
<div class="spectrum-Examples spectrum-Examples--vertical">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">50</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size50">
      <a href="#" class="spectrum-Avatar-link">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </a>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size75">
      <a href="#" class="spectrum-Avatar-link">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </a>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size100">
      <a href="#" class="spectrum-Avatar-link">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </a>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size200">
      <a href="#" class="spectrum-Avatar-link">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </a>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size300">
      <a href="#" class="spectrum-Avatar-link">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </a>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size400">
      <a href="#" class="spectrum-Avatar-link">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </a>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size500">
      <a href="#" class="spectrum-Avatar-link">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </a>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size600">
      <a href="#" class="spectrum-Avatar-link">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </a>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size700">
      <a href="#" class="spectrum-Avatar-link">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </a>
    </div>
  </div>
</div>

No Link
Contribution

700

Avatar
Disabled Avatar
Show markup
<div class="spectrum-Examples spectrum-Examples--vertical">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size700">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
    </div>
    <div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
    </div>
  </div>
</div>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

A div wrapper is required for avatar

<div class="spectrum-Avatar spectrum-Avatar--size50">
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</div>

Sizes added to avatar.

A second class has to be added to spectrum-Avatar to declare which size to use. The available size classes are: spectrum-Avatar--size50, spectrum-Avatar--size75, spectrum-Avatar--size100, spectrum-Avatar--size200, spectrum-Avatar--size300, spectrum-Avatar--size400, spectrum-Avatar--size500, spectrum-Avatar--size600, and spectrum-Avatar--size700.