Avatar
The Avatar component shows a user's profile image in a circular frame and allows for a few helpful modifications for different uses.
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 |
---|---|---|---|
|
Adds a badge component to the bottom-right of the avatar. The badge will properly scale to the size of the Avatar. |
Boolean |
|
|
Sets the badge icon background color. Provide either a Sage color name or a custom Hex color value. Use |
String |
|
|
Sets the badge icon stroke/fill color. Use |
String |
|
|
Sets a Sage icon. If not set, will defaul to |
Boolean |
|
|
This component uses the |
|
|
|
Formats the avatar to be centered by setting side |
Boolean |
|
|
Allows for configuration of an image. |
|
|
|
The initials to display in the avatar circle |
String |
|
|
Whether or not to layer initials behind an image as a lazy loading helper. |
Boolean |
|
|
A size setting to customize the Avatar's width and height inline.
NOTE: Fixed settings such as |
String |
|
Avatar Group | |||
|
A set of items following the Avatar schema above to be displayed. Only the first four items will be rendered. |
Array |
|