Avatar
<cw-avatar> | CwAvatar
Avatars are used to represent a person or object.
By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and
images. You should always provide a label for assistive devices.
<cw-avatar label="User avatar"></cw-avatar>
import CwAvatar from '@cordwainer/cw-elements/dist/react/avatar'; const App = () => <CwAvatar label="User avatar" />;
Examples
Images
To use an image for the avatar, set the image and label attributes. This will take
priority and be shown over initials and icons. Avatar images can be lazily loaded by setting the
loading attribute to lazy.
<cw-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down" ></cw-avatar> <cw-avatar image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a white and grey kitten on grey textile" loading="lazy" ></cw-avatar>
import CwAvatar from '@cordwainer/cw-elements/dist/react/avatar'; const App = () => ( <CwAvatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a gray tabby kitten looking down" /> <CwAvatar image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="Avatar of a white and grey kitten on grey textile" loading="lazy" /> );
Initials
When you don’t have an image to use, you can set the initials attribute to show something more
personalized than an icon.
<cw-avatar initials="SL" label="Avatar with initials: SL"></cw-avatar>
import CwAvatar from '@cordwainer/cw-elements/dist/react/avatar'; const App = () => <CwAvatar initials="SL" label="Avatar with initials: SL" />;
Custom Icons
When no image or initials are set, an icon will be shown. The default avatar shows a generic “user” icon,
but you can customize this with the icon slot.
<cw-avatar label="Avatar with an image icon"> <cw-icon slot="icon" name="image"></cw-icon> </cw-avatar> <cw-avatar label="Avatar with an archive icon"> <cw-icon slot="icon" name="archive"></cw-icon> </cw-avatar> <cw-avatar label="Avatar with a briefcase icon"> <cw-icon slot="icon" name="briefcase"></cw-icon> </cw-avatar>
import CwAvatar from '@cordwainer/cw-elements/dist/react/avatar'; import CwIcon from '@cordwainer/cw-elements/dist/react/icon'; const App = () => ( <> <CwAvatar label="Avatar with an image icon"> <CwIcon slot="icon" name="image" /> </CwAvatar> <CwAvatar label="Avatar with an archive icon"> <CwIcon slot="icon" name="archive" /> </CwAvatar> <CwAvatar label="Avatar with a briefcase icon"> <CwIcon slot="icon" name="briefcase" /> </CwAvatar> </> );
Shapes
Avatars can be shaped using the shape attribute.
<cw-avatar shape="square" label="Square avatar"></cw-avatar> <cw-avatar shape="rounded" label="Rounded avatar"></cw-avatar> <cw-avatar shape="circle" label="Circle avatar"></cw-avatar>
import CwAvatar from '@cordwainer/cw-elements/dist/react/avatar'; import CwIcon from '@cordwainer/cw-elements/dist/react/icon'; const App = () => ( <> <CwAvatar shape="square" label="Square avatar" /> <CwAvatar shape="rounded" label="Rounded avatar" /> <CwAvatar shape="circle" label="Circle avatar" /> </> );
Avatar Groups
To display a stack of overlapping avatars, use the dedicated Avatar Group component instead of assembling one with custom CSS — it handles overlap spacing, a separating ring between avatars, and collapsing extras into a ”+N” indicator for you.
Linkable Avatars
Set the href attribute to render the avatar as a link — useful for avatars that should navigate
to e.g. a profile page. target and rel are also available and behave the same way
they do on <cw-button>.
<cw-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="View Alex's profile" href="https://example.com/people/alex" target="_blank" ></cw-avatar>
import CwAvatar from '@cordwainer/cw-elements/dist/react/avatar'; const App = () => ( <CwAvatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" label="View Alex's profile" href="https://example.com/people/alex" target="_blank" /> );
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.6.0/cdn/components/avatar/avatar.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.6.0/cdn/components/avatar/avatar.js';
To import this component using a bundler:
import '@cordwainer/cw-elements/dist/components/avatar/avatar.js';
To import this component as a React component:
import CwAvatar from '@cordwainer/cw-elements/dist/react/avatar';
Slots
| Name | Description |
|---|---|
icon
|
The default icon to use when no image or initials are present. Works best with
<cw-icon>.
|
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
image
|
The image source to use for the avatar. |
string
|
''
|
|
label
|
A label to use to describe the avatar to assistive devices. |
string
|
''
|
|
initials
|
Initials to use as a fallback when no image is available (1–2 characters max recommended). |
string
|
''
|
|
loading
|
Indicates how the browser should load the image. |
'eager' | 'lazy'
|
'eager'
|
|
shape
|
The shape of the avatar. |
|
'circle' | 'square' | 'rounded'
|
'circle'
|
href
|
When set, the avatar is rendered as an <a> with this href, linking
to e.g. a profile page.
|
string
|
''
|
|
target
|
Tells the browser where to open the link. Only used when href is present. |
'_blank' | '_parent' | '_self' | '_top'
|
- | |
rel
|
When using href, this attribute will map to the underlying link’s
rel attribute. Unlike regular links, the default is noreferrer noopener to
prevent security exploits. However, if you’re using target to point to a different
frame, you’ll probably want this to change to noopener alone.
|
string
|
'noreferrer noopener'
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
cw-error |
onCwError |
The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. | - |
Learn more about events.
Custom Properties
| Name | Description | Default |
|---|---|---|
--size |
The size of the avatar. |
Learn more about customizing CSS custom properties.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
icon |
The container that wraps the avatar’s icon. |
initials |
The container that wraps the avatar’s initials. |
image |
The avatar image. Only shown when the image attribute is set. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<cw-icon>