Avatar

Live demo

A person's photo or initials.

Provide name (used for initials and the accessible name), optionally src and size (sm 28, md 36, lg 48).
Fallback uses --e-accent-soft with --e-accent-ink.

Don't: decorate avatars with rings or status dots unless they carry meaning.

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

React

import { Avatar } from 'enma/react';

<Avatar name="Manish Mandal" />
<Avatar name="Priya Shah" src="/people/priya.webp" size="lg" />

Plain HTML

<span class="e-avatar e-avatar--md" role="img" aria-label="Manish Mandal"><span aria-hidden="true">MM</span></span>

Props of AvatarProps
Prop	Type	Default
`name` required	string
`src`	string
`size`	'sm' \| 'md' \| 'lg'	'md'
`className`	string
`style`	React.CSSProperties