Avatar

View source on GitHub

Use Avatar to represent a user. Every Avatar image has a subtle color wash.

Props

Component props
Name
Type
Default
name
Required
string
-

The name of the user. This is used for the placeholder treatment if an image is not available.

accessibilityLabel
string
-

String that clients such as VoiceOver will read to describe the element. Will default to name prop if not provided.

outline
boolean
-

Adds a white border around Avatar so it's visible when displayed on other images.

size
"xs" | "sm" | "md" | "lg" | "xl" | "fit"
-

xs: 24px, sm: 32px, md: 48px, lg: 64px, xl: 120px. If size is fit, Avatar will fill 100% of the parent container width.

src
string
-

The URL of the user's image.

verified
boolean
-

Used to indicate if the user is verified.

Usage guidelines

When to Use
  • To reflect a person, company or brand within the product.
When Not to Use
  • To represent a group of people, companies and/or brands. Use AvatarGroup instead.

Fixed Sizes

There are 5 sizes available for Avatar. For certain designs you may need a container-based size.

Keerthi
Keerthi
Keerthi
Keerthi
Keerthi

Container-Based Sizes

Avatars without a size prop will be expand to fit to the width of their
parent container. A common use case is to achieve column-based sizing.

Resize the browser to see these Avatar change to match the width of the Column they
have been placed in.

JuliaJ
JuliaJ
Keerthi

Without an image

If there is no image source provided to the Avatar, the first character of
the name provided will be used as a placeholder.

KeerthiK

Verified

For users with verified accounts, use the verified prop to add a checkmark.

Shanice
Edit page on GitHub