Avatar

The Avatar component shows a user's profile image in a circular frame and allows for a few helpful modifications for different uses.

React Component

Default Avatars

Image Avatars

Avatar Badges

Avatar Badges with Custom Color and Icon

Custom Colors

Avatar Groups

Avatar centered + custom size

Layering and lazy loading

By default, Avatars with both an image and initials provided will stack with the image on top of the initials. The result is a lazy loading effect where initials appear immediately and an image will appear later on slower or delayed connetions. If this effect is not desired when an image is used, then also set lazy_load_initials: false.

NOTE: This also allows for a fallback approach with image APIs such as Gravatar that return a default image when no user image is available. In such cases a transparent PNG image can be provided as the default image so that when this default image is layered on top of the initials, the initials are seen rather than a generic "anonymous user" image.

Valid Gravatar with lazy loading:

Valid Gravatar with NO lazy loading:

Sage Component

SageAvatar

<h3>Default Avatars</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, { size: "24px" } %>
  <%= sage_component SageAvatar, { size: "32px" } %>
  <%= sage_component SageAvatar, { size: "40px" } %>
  <%= sage_component SageAvatar, { size: "56px" } %>
  <%= sage_component SageAvatar, { size: "72px" } %>
  <%= sage_component SageAvatar, { size: "88px" } %>
</div>

<h3>Image Avatars</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, {
    size: "24px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "32px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "40px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "56px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "72px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "88px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
</div>

<h3>Avatar Badges</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, { size: "24px", badge: true } %>
  <%= sage_component SageAvatar, { size: "32px", badge: true } %>
  <%= sage_component SageAvatar, { size: "40px", badge: true } %>
  <%= sage_component SageAvatar, { size: "56px", badge: true } %>
  <%= sage_component SageAvatar, {
    badge: true,
    size: "72px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    badge: true,
    size: "88px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
</div>

<h3>Avatar Badges with Custom Color and Icon</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, {
    badge: true,
    badge_foregroundColor: "yellow",
    badge_backgroundColor: "#4232a8",
    badge_icon: "play-circle",
    size: "80px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    badge: true,
    badge_foregroundColor: "red-300",
    badge_backgroundColor: "#fff",
    badge_icon: "danger",
    size: "80px",
    image: {
      alt: "Court's profile image",
      src: "avatar/court.png",
      id: "custom_id"
    }
  } %>
</div>

<h3>Custom Colors</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, { size: "24px",  color: "purple" } %>
  <%= sage_component SageAvatar, { size: "32px",  color: "sage" } %>
  <%= sage_component SageAvatar, { size: "40px",  color: "orange" } %>
  <%= sage_component SageAvatar, { size: "56px",  color: "yellow" } %>
  <%= sage_component SageAvatar, { size: "72px",  color: "red" } %>
</div>

<h3>Avatar Groups</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatarGroup, {
    items: [
      { color: nil,
      image: {
        alt: "Demi Wilkinson",
        src: "avatar/demi_wilkinson.png",
        id: "custom_id"
      }},
    ]
  } %>
  <%= sage_component SageAvatarGroup, {
    items: [
      { color: nil },
      { color: "purple", },
    ]
  } %>
  <%= sage_component SageAvatarGroup, {
    items: [
      { color: nil,
        image: {
          alt: "Koray Okumus",
          src: "avatar/koray_okumus.png",
          id: "custom_id"
        }
      },
      { color: "purple", },
      { color: "sage", },
    ]
  } %>
  <%= sage_component SageAvatarGroup, {
    items: [
      { color: nil },
      { color: "purple", },
      { color: "sage", },
      { color: "orange", },
    ]
  } %>
</div>

<h3>Avatar centered + custom size</h3>
<%= sage_component SageAvatar, { 
  centered: true,
  image: {
    alt: "Joshua Wilson",
    src: "avatar/joshua_wilson.png",
    id: "custom_id"
  },
  size: "128px"
} %>

<h3>Layering and lazy loading</h3>
<%= md('
By default, Avatars with both an `image` and `initials` provided will stack with the image on top of the initials.
The result is a lazy loading effect where initials appear immediately and an image will appear later on slower or delayed connetions.
If this effect is not desired when an `image` is used, then also set `lazy_load_initials: false`.

NOTE: This also allows for a fallback approach with image APIs such as Gravatar that return a default image when no user image is available.
In such cases a transparent PNG image can be provided as the default image so that when this default image is layered on top of the initials,
the initials are seen rather than a generic "anonymous user" image.
') %>

<p>Valid Gravatar with lazy loading:</p>
<%= sage_component SageAvatar, {
  image: { src: "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?" }
} %>

<p>Valid Gravatar with NO lazy loading:</p>
<%= sage_component SageAvatar, {
  initials: "PS",
  image: { src: "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?" },
  lazy_load_initials: false
} %>

Property	Description	Type	Default
`badge`	Adds a badge component to the bottom-right of the avatar. The badge will properly scale to the size of the Avatar.	Boolean	`false`
`badge_backgroundColor`	Sets the badge icon background color. Provide either a Sage color name or a custom Hex color value. Use `SageTokens::COLOR_PALETTE` for hex values from the full Sage color palette. If not set, will default to white.	String	`false`
`badge_foregroundColor`	Sets the badge icon stroke/fill color. Use `SageTokens::COLOR_SLIDER` for Sage system colors. If not set, will default to `primary-300`.	String	`false`
`badge_icon`	Sets a Sage icon. If not set, will defaul to `check-circle-filled`.	Boolean	`false`
`color`	This component uses the `--color` modifier to change the default color set to the provided color. For example `sage-avatar--orange` sets the initials color and background color to variants of the system's orange swatch.	`["primary", "sage", "yellow", "red", "orange", "purple", "charcoal", "grey", "white", "black"]`	`nil` (primary color)
`centered`	Formats the avatar to be centered by setting side `margin` to `auto`.	Boolean	`false`
`image`	Allows for configuration of an image.	`{ alt: String (optional), src: String, }`	`nil`
`initials`	The initials to display in the avatar circle	String	`nil`
`lazy_load_initials`	Whether or not to layer initials behind an image as a lazy loading helper.	Boolean	`true`
`size`	A size setting to customize the Avatar's width and height inline. NOTE: Fixed settings such as `px`, `rem`, or `vw` are most reliable as scalable values such as `%` may lead to a squished appearance.	String	`nil`
Avatar Group
`items` required	A set of items following the Avatar schema above to be displayed. Only the first four items will be rendered.	Array	`[]`