Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (67 sloc) 2.11 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import Sizes from 'examples/avatar/sizes.js'; import Error from 'examples/avatar/error.js'; import Override from 'examples/avatar/override.js'; import Initals from 'examples/avatar/initals.js';

import Overrides from '../../components/overrides'; import {Avatar} from 'baseui/avatar'; import * as AvatarExports from 'baseui/avatar'; import {Block} from 'baseui/block';

export default Layout;


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.


  • 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.

<Example title="Avatar with example overrides" path="avatar/override.js"


<Overrides name="Avatar" component={AvatarExports} renderExample={props => ( <React.Fragment> <Avatar overrides={props.overrides} name={user} size="scale1400" src="https://not-a-real-image.png" /> </React.Fragment> )} />

<API heading="Avatar API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/avatar/avatar.js')} />

You can’t perform that action at this time.