Avatar

Visual representation of a person.

Props#

Name	Type	Default	Description
`name`*	`string`	—	Display name — used to derive initials when no image is provided.
`src`	`string`	—	Optional image URL. Falls back to initials if omitted.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`md`	Size preset.
`shape`	`"circle" \| "square"`	`circle`	Shape — circle (default) or rounded square.

All Avatar variants live in a single multi-export stories file, surfaced via the :::stories directive.

Initials#

Show code

Avatar.stories.tsx

import { Avatar } from '../../../src/pixie/Avatar.js';

/**
 * Single multi-export stories file demonstrating the `:::stories` directive.
 *
 * `Initials` is a plain render function — the most common form.
 *
 * `WithImage` is a render function too.
 *
 * `Sizes` is a render function returning a row of variants.
 *
 * `Square` is a CSF v3 object — render plus metadata (`name` + `parameters`)
 *   exercises the entry generator's CSF resolution path.
 */
export const Initials = () => <Avatar name="Tudor Popa" />;

With Image#

Show code

Avatar.stories.tsx

import { Avatar } from '../../../src/pixie/Avatar.js';

export const WithImage = () => <Avatar name="Markbook mascot" src="https://placecats.com/64/64" />;

Sizes#

Show code

Avatar.stories.tsx

import { Avatar } from '../../../src/pixie/Avatar.js';

export const Sizes = () => (
  <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
    <Avatar name="Ada Lovelace" size="sm" />
    <Avatar name="Grace Hopper" size="md" />
    <Avatar name="Margaret Hamilton" size="lg" />
    <Avatar name="Katherine Johnson" size="xl" />
  </div>
);

Square#

Show code

Avatar.stories.tsx

import { Avatar } from '../../../src/pixie/Avatar.js';

export const Square = {
  name: 'Square shape',
  parameters: { layout: 'centered' as const },
  render: () => <Avatar name="Lin Manuel" shape="square" size="lg" />,
};