Avatar

Avatars are used to represent users or entities. They can display an image or initials as a fallback. Idea React provides the Avatar and AvatarStack wrappers for these examples.

Live example

<Avatar
  alt="idea2app"
  src="https://github.com/idea2app.png"
/>

Examples

Image

Use .avatar with an .avatar-img for image-based avatars. The parent .avatar element provides an easy wrapper for additional avatar features like status indicators and stacks. You’re welcome to use the .avatar-img class on its own if you only need a single HTML element.

When used inside the .avatar wrapper, the image fills the wrapper and its size is set with --bs-avatar-size. Used on its own, .avatar-img honors its own width and height instead, so set them to your desired size.

Initials

Use text content inside .avatar for initials-based avatars.

ABCDEFGGGHIJKLMNOP

Use .avatar-subtle to create a subtle avatar.

ABCDEFGGGHIJKLMNOP

Sizes

Avatars come in multiple sizes: extra small, small, default, large, and extra large.

Use a custom size by modifying the --bs-avatar-size variable. The size prop accepts a number in rem and applies the variable for you.

Status indicator

Add a .avatar-status element inside the avatar to show a status indicator. Each status has a distinct shape and color:

.status-online — green circle
.status-offline — gray rounded square
.status-busy — red rounded square
.status-away — yellow circle

Because the status is conveyed purely through color and shape, give each .avatar-status a role="img" and an aria-label (e.g. Online) so assistive technologies can announce it. The status prop renders the indicator and the accessible label automatically.

Status with sizes

The status indicator scales with the avatar size.

Avatar stack

Use .avatar-stack to group multiple avatars together with overlapping effect. Avatars are rendered in reverse order so the first avatar appears on top. Stacks use a percentage of the avatar size to determine how much to overlap stacked avatars.

Stack with sizes

As a shorthand, size classes are available for .avatar-stack and .avatar.

Stack with count

Combine with initials to show a count of additional users.

CSS

Avatar sizes and status dimensions are defined by Bootstrap's CSS variables and the $avatar-sizes Sass map. Each size specifies the avatar size and status size. See the upstream avatar CSS for the variable and map reference.