Build / Atoms

Avatar

atom
play-fn

A person or company image with a resilient initials fallback.

import { Avatar } from '@meetcard/deck'

Example

<Avatar name="Ada Lovelace" src={photo} /> <Avatar name="MeetCard" shape="rounded" size="lg" />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

With no image, initials are derived from the name.

Initials

Source

const Initials = () => <Avatar name="Ada Lovelace" />;

With a photo. The initials remain the fallback if the image fails to load.

With Photo

Source

const WithPhoto = () => <Avatar
    name="Ada Lovelace"
    src={'data:image/svg+xml;utf8,' +
    encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="%232e6e5b"/><circle cx="40" cy="32" r="14" fill="%23faf8f4"/><path d="M12 80c0-18 12-28 28-28s28 10 28 28z" fill="%23faf8f4"/></svg>`,
    )} />;

A broken image URL falls back to initials rather than a broken-image icon.

Broken Image Falls Back

Source

const BrokenImageFallsBack = () => <Avatar name="Ada Lovelace" src="https://example.invalid/missing.png" />;

Every size. lg and xl are for a card's own face; xs and sm sit inline with text.

Sizes

Source

const Sizes = (args) => (
  <Stack direction="row" gap={12} align="center">
    {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map((size) => (
      <Avatar {...args} key={size} size={size} />
    ))}
  </Stack>
);

rounded reads as a logo; circle reads as a person.

Shapes

Source

const Shapes = () => <Stack direction="row" gap={12} align="center">
    <Avatar name="Ada Lovelace" shape="circle" />
    <Avatar name="MeetCard" shape="rounded" />
</Stack>;

Inside a card the name is usually already rendered as text, so the avatar is marked decorative to avoid a screen reader announcing it twice.

Decorative

Source

const Decorative = () => <Avatar name="Ada Lovelace" decorative />;

Props

Prop	Type	Default	Description
`name`required	`string`	—	Person or company name. Required — it is both the accessible name and the source of the initials fallback.
`decorative`	`boolean`	`false`	Hide from assistive tech. Use when the name is already announced by adjacent text, so screen readers don't hear it twice.
`shape`	`'circle' \| 'rounded'`	`'circle'`	`rounded` suits company logos; `circle` suits people.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	—
`src`	`string`	—	Optional photo or logo. Falls back to initials if it fails to load.

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.