Avatar

Buttons allow users to take significant action–submit a form, follow a user, create a record etc.

Avatar

Occasionally, if an action is more significant, essential or impactful, one of three pronounced buttons can be used.

<div class="Avatar">
  <span>CT</span>
</div>

<div class="Avatar">
  <img width="32" height="32" alt="Colm Tuite">
</div>

Sizes

Occasionally, if an action is more significant, essential or impactful, one of three pronounced buttons can be used.

<div class="Avatar size1">
  <img width="16" height="16" alt="Colm Tuite">
</div>

<div class="Avatar size2">
  <img width="24" height="24" alt="Colm Tuite">
</div>

<div class="Avatar">
  <img width="32" height="32" alt="Colm Tuite">
</div>

<div class="Avatar size4">
  <img width="48" height="48" alt="Colm Tuite">
</div>

<div class="Avatar size5">
  <img width="64" height="64" alt="Colm Tuite">
</div>

<div class="Avatar size6">
  <img width="96" height="96" alt="Colm Tuite">
</div>

Avatar group

Occasionally, if an action is more significant, essential or impactful, one of three pronounced buttons can be used.

<div class="AvatarGroup">
  <div class="Avatar">
      <img width="32" height="32" src="https://pbs.twimg.com/profile_images/845457999921528833/hSjas2X0_bigger.jpg" alt="Colm Tuite">
  </div>
  <div class="Avatar">
      <img width="32" height="32" src="https://pbs.twimg.com/profile_images/877247149733498880/LjCGFgei_bigger.jpg" alt="Colm Tuite">
  </div>
  <div class="Avatar">
      <img width="32" height="32" src="https://pbs.twimg.com/profile_images/775218893325422593/83yqIBmH_bigger.jpg" alt="Colm Tuite">
  </div>
</div>

Nested avatars

Occasionally, if an action is more significant, essential or impactful, one of three pronounced buttons can be used.

<button class="Button" type="button"></button>

Avatar with status indicator

Occasionally, if an action is more significant, essential or impactful, one of three pronounced buttons can be used.

<button class="Button" type="button"></button>