Component primitive

Brand Avatar

<brand-avatar> wraps Web Awesome's <wa-avatar>. Provide an image, initials, or a slotted icon.

<brand-avatar>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-avatar>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Shapes

With image

Initials

Fallback icon

Custom sizes

Set the --brand-avatar-size custom property on the host to change diameter. Accepts any CSS length.

Usage

import { BrandAvatar } from '@brandos/ui';

<brand-avatar image="/avatars/jane.png" label="Jane Doe"></brand-avatar>
<brand-avatar initials="JD" shape="circle"></brand-avatar>
<brand-avatar label="Avatar">
  <wa-icon slot="icon" name="person-fill"></wa-icon>
</brand-avatar>