Standard duskmoon implemented 8 demos

Avatar

Avatar represents a person, team, object, or entity in compact UI surfaces.

Import @duskmoon-dev/components/avatar

3 API sections

5 documented props

6 behavior scenarios

Key API

sizeshapesrcaltfallback

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Avatar is most often configured through `size`, `shape`, `src`, `alt`.

Covered behavior

Renders with default classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Avatar from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Avatar } from "@duskmoon-dev/components/avatar";

export function Example() {
  return (<Avatar className="avatar-primary">DM</Avatar>);
}

Preview

Renders with default classes

test-backed

Avatar scenario from the component test coverage: renders with default classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Avatar } from "@duskmoon-dev/components/avatar";

export function AvatarRendersWithDefaultClassesDemo() {
  return (<Avatar className="avatar-primary">DM</Avatar>);
}

Preview

Renders with custom size and shape

test-backed

Avatar scenario from the component test coverage: renders with custom size and shape.

Source

import "@duskmoon-dev/components/styles.css";
import { Avatar } from "@duskmoon-dev/components/avatar";

export function AvatarRendersWithCustomSizeDemo() {
  return (<Avatar className="avatar-primary">DM</Avatar>);
}

Preview

Renders image when src is provided

test-backed

Avatar scenario from the component test coverage: renders image when src is provided.

Source

import "@duskmoon-dev/components/styles.css";
import { Avatar } from "@duskmoon-dev/components/avatar";

export function AvatarRendersImageWhenSrcDemo() {
  return (<Avatar className="avatar-primary">DM</Avatar>);
}

Preview

Renders fallback when image fails to load

test-backed

Avatar scenario from the component test coverage: renders fallback when image fails to load.

Source

import "@duskmoon-dev/components/styles.css";
import { Avatar } from "@duskmoon-dev/components/avatar";

export function AvatarRendersFallbackWhenImageDemo() {
  return (<Avatar className="avatar-primary">DM</Avatar>);
}

Preview

Renders children as fallback when image fails to load and no fallback prop provided

test-backed

Avatar scenario from the component test coverage: renders children as fallback when image fails to load and no fallback prop provided.

Source

import "@duskmoon-dev/components/styles.css";
import { Avatar } from "@duskmoon-dev/components/avatar";

export function AvatarRendersChildrenAsFallbackDemo() {
  return (<Avatar className="avatar-primary">DM</Avatar>);
}

Preview

Renders fallback when no src is provided

test-backed

Avatar scenario from the component test coverage: renders fallback when no src is provided.

Source

import "@duskmoon-dev/components/styles.css";
import { Avatar } from "@duskmoon-dev/components/avatar";

export function AvatarRendersFallbackWhenNoDemo() {
  return (<Avatar className="avatar-primary">DM</Avatar>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Avatar className="avatar-primary">DM</Avatar>
</div>

<div data-theme="moonlight">
  <Avatar className="avatar-primary">DM</Avatar>
</div>

API

The API reference below lists every parsed exported type or interface for Avatar. Start with `size`, `shape`, `src`, `alt` for common usage.

Types: packages/components/src/components/avatar/Avatar.types.ts Scenarios: packages/components/src/components/avatar/Avatar.test.tsx

AvatarProps interface extends ComponentProps<"span">

Prop	Type	Required	Description
`size`	`AvatarSize`	No	size configures Avatar.
`shape`	`AvatarShape`	No	shape configures Avatar.
`src`	`string`	No	src configures Avatar.
`alt`	`string`	No	alt configures Avatar.
`fallback`	`React.ReactNode`	No	fallback configures Avatar.

AvatarSize type

"xs" | "sm" | "md" | "lg" | "xl"

AvatarShape type

"circle" | "square"