Avatar

Avatar renders a user's profile photo, falling back to generated initials when no image is available. Four sizes plus optional presence indicators (online / busy / away / offline).

Use it for

• User identity in cards, comments, and lists
• Profile headers and account settings
• Stacked avatar groups (team rosters, comment threads)
• Anywhere a person needs visual identification

For non-person entities (companies, projects), use Card with a logo or Icons. For status without identity, use Dot.

Import

import { Avatar } from '@brikdesigns/bds';

Variants

With image

<Avatar src="/users/alice.jpg" alt="Alice Chen" name="Alice Chen" />

alt is the accessible name for the image. name provides the initials fallback if the image fails to load.

Initials fallback

When src is omitted (or fails to load), Avatar generates initials from name.

<Avatar name="Alice Chen" />        {/* AC */}
<Avatar name="John Doe" />          {/* JD */}
<Avatar name="Maria Lopez Garcia" />  {/* ML */}

Sizes

Presence status

status adds a colored dot in the bottom-right corner.

<Avatar name="Alice" status="online" />
<Avatar name="Bob" status="away" />
<Avatar name="Charlie" status="busy" />
<Avatar name="Diana" status="offline" />

Pattern: stacked avatar group

Negative-margin stack for "10 people commented" indicators.

<div style={{ display: 'flex' }}>
  {users.slice(0, 4).map((u, i) => (
    <Avatar
      key={u.id}
      src={u.avatar}
      name={u.name}
      style={{ marginLeft: i === 0 ? 0 : -8, border: '2px solid white' }}
    />
  ))}
  {users.length > 4 && (
    <Avatar name={`+${users.length - 4}`} style={{ marginLeft: -8 }} />
  )}
</div>

When not to use

• Don't use Avatar for non-person identity. Companies, projects, or rooms have their own visual languages — use Card with a logo or Icons.
• Don't use Avatar without name or alt. Both serve as accessible labels — without them, screen readers announce nothing useful.

Accessibility

• Renders a <div> with the image inside. The image's alt becomes the accessible name.
• Initials fallback inherits the name for accessibility (aria-label).
• Status indicator carries aria-label="Online" (etc.) so screen readers announce the state.

API

Plus standard <div> HTML attributes.

Related

• Board → BoardHeader — uses Avatar internally
• Dot — status without identity
• Icons — for non-person identity
• Storybook playground