Edit this page
[?] Component size, gzipped: 23kb

Avatar

Adds additional visual information about a user.

When to use

  • When you want to show a user's image along contextual information.
  • When you want to attribute an action to a user.

Accessibility

  • Top level name prop will be set on the <img> element as its alt attribute.
  • If src fails to load, applies aria-label with provided name and role with 'img' to root div element.

Examples

Avatar with available sizes

user
user
user
user
user

Avatar with error fallback

user
user
user
user
user

Avatar with initals

Avatar with example overrides

user name #1
beyonce knowles
user name #3
beyonce knowles

Overrides

Additionally, you can fully customize any part of the Avatar through the overrides prop. The Avatar consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

user name #1
user

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Avatar API

name string required

Defines an alternative text description of the image.

overrides { Avatar: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Initials: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }<object> = {}

{ Avatar: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Initials: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>>, Root: { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }><<T>> }
$didImageFailToLoad boolean required
$size string

size string = "scale1000"

Defines the width/height of the image. Accepts labels from theme.sizing, or passes value to height/width.

src string

Image to display.

Avatar exports

You can import this module like so:

import {Avatar} from 'baseui/avatar'

It exports the following components or utility functions:

  • Avatar
  • StyledAvatar
  • StyledInitials
  • StyledRoot