avatar.mdx

import Example from '../../components/example'; import Exports from '../../components/exports'; import Layout from '../../components/layout'; import SEO from '../../components/meta-seo';

import Sizes from 'examples/avatar/sizes.js'; import Error from 'examples/avatar/error.js'; import Override from 'examples/avatar/override.js'; import Initials from 'examples/avatar/initials.js';

import {Avatar} from 'baseui/avatar'; import * as AvatarExports from 'baseui/avatar'; import {Block} from 'baseui/block';

import Yard from '../../components/yard/index'; import avatarYardConfig from '../../components/yard/config/avatar'; import ApiTable from '../../components/api-table';

export default Layout;

Avatar

<Yard placeholderHeight={52} {...avatarYardConfig} />

The Avatar component 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

API

<ApiTable title="Avatar props" config={avatarYardConfig} types={require('!!extract-react-types-loader!../../../src/avatar/avatar.js')} />