Avatar

since v0.2.0

User identity representation — shows photo or name initial as fallback.

When status is provided the component wraps the avatar in a relative <div>

and ref forwards to that wrapper. Without status, ref forwards to the

<img> (src present) or the initials <div> (src absent).

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten

pnpm add @hey-mike/tungsten

import { Avatar } from '@hey-mike/tungsten';

import { Avatar } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/avatar/page.tsx

import { Avatar } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function AvatarSnapshot() {
  return (
    <VariantGrid
      title="Avatar"
      hero={<Avatar size="md" name="Ada Lovelace" />}
      variants={[
        { label: 'xs', node: <Avatar size="xs" name="Ada Lovelace" /> },
        { label: 'sm', node: <Avatar size="sm" name="Ada Lovelace" /> },
        { label: 'md', node: <Avatar size="md" name="Ada Lovelace" /> },
        { label: 'lg', node: <Avatar size="lg" name="Ada Lovelace" /> },
      ]}
    />
  );
}

import { Avatar } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function AvatarSnapshot() {
  return (
    <VariantGrid
      title="Avatar"
      hero={<Avatar size="md" name="Ada Lovelace" />}
      variants={[
        { label: 'xs', node: <Avatar size="xs" name="Ada Lovelace" /> },
        { label: 'sm', node: <Avatar size="sm" name="Ada Lovelace" /> },
        { label: 'md', node: <Avatar size="md" name="Ada Lovelace" /> },
        { label: 'lg', node: <Avatar size="lg" name="Ada Lovelace" /> },
      ]}
    />
  );
}

Props

Surface specific to <Avatar />.

Prop	Type	Default	Description
size	`"xs" \| "sm" \| "md" \| "lg"`	`md`	—
status	`"online" \| "away" \| "offline" \| "busy"`	—	—
className	`string`	—	—
src	`string \| null`	—	—
name	`string \| null`	—	—
aria-label	`string`	—	—

Sub-components

Composition slots re-exported from the same module.

AvatarGroup

No library-specific props. Pass through standard HTML attributes for the underlying element.