Avatar

Avatar is used for showing a thumbnail representation of an admin, customer, or business

React Component

Default Avatars

Image Avatars

Avatar Badges

Avatar Badges with Custom Color and Icon

Custom Colors

Avatar Groups

Avatar centered + custom size

Initials and Lazy Loading

When you provide initials for your Avatar, the system will promptly display them. If you also provide an image src, it is designed to layer this image over the initials, creating a lazy loading effect. This layering creates a lazy loading effect, effective in situations with slower connections, as the initials appear immediately while the image lazy loads.

However, if this effect is not required when using an image, it can easily be disabled by setting lazy_load_initials to false.

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: "Joshua's profile image",
      src: "avatar/joshua_wilson.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "32px",
    image: {
      alt: "Joshua's profile image",
      src: "avatar/joshua_wilson.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "40px",
    image: {
      alt: "Joshua's profile image",
      src: "avatar/joshua_wilson.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "56px",
    image: {
      alt: "Joshua's profile image",
      src: "avatar/joshua_wilson.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "72px",
    image: {
      alt: "Joshua's profile image",
      src: "avatar/joshua_wilson.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    size: "88px",
    image: {
      alt: "Joshua's profile image",
      src: "avatar/joshua_wilson.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: "Joshua's profile image",
      src: "avatar/joshua_wilson.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    badge: true,
    size: "88px",
    image: {
      alt: "Joshua's profile image",
      src: "avatar/joshua_wilson.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: "Joshua's profile image",
      src: "avatar/joshua_wilson.png",
      id: "custom_id"
    }
  } %>
  <%= sage_component SageAvatar, {
    badge: true,
    badge_foregroundColor: "red-300",
    badge_backgroundColor: "#fff",
    badge_icon: "danger",
    size: "80px",
    image: {
      alt: "Joshua's profile image",
      src: "avatar/joshua_wilson.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>Initials and Lazy Loading</h3>
<div class="sage-avatar-wrapper">
  <%= sage_component SageAvatar, {
    size: "52px",
    initials: "KJ"
  } %>

<div class="sage-avatar-wrapper">
<%= sage_component SageAvatar, {
  size: "52px",
  image: {
    alt: "Joshua's profile image",
    src: "avatar/joshua_wilson.png",
    id: "custom_id"
  },
  initials: "CA",
  lazy_load_initials: true,
} %>
</div>

<%= md('
When you provide initials for your Avatar, the system will promptly display them. If you also provide an image `src`, it is designed to layer this image over the initials, creating a lazy loading effect. This layering creates a lazy loading effect, effective in situations with slower connections, as the initials appear immediately while the image lazy loads.

However, if this effect is not required when using an image, it can easily be disabled by setting `lazy_load_initials` to 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	`[]`