Avatar

Identity chip for a person or agent — initials or image with size, presence, and agent variants.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add avatar

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { Avatar } from '@app/components/ui/avatar.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><Avatar name="Maya Rossi" /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional	Description
`AvatarProps`	`name`	`string`	No	Full name — drives the accessible label and the initials fallback.
`AvatarProps`	`src`	`string`	Yes	Optional image source; falls back to initials when absent or broken.
`AvatarProps`	`initials`	`string`	Yes	Override the derived initials.
`AvatarProps`	`size`	`AvatarSize`	Yes	Diameter token.
`AvatarProps`	`presence`	`AvatarPresence`	Yes	Presence dot; omitted when undefined.
`AvatarProps`	`agent`	`boolean`	Yes	Render as an AI agent (primary fill).
`AvatarProps`	`class`	`string`	Yes

TypeScript

type AvatarSize = "sm" | "md" | "lg"
type AvatarPresence = "online" | "away" | "offline"
AvatarProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "class">

Keyboard

Presentation component; no component-specific keyboard interactions.

Tokens

Semantic contract roles: border/strong, primary/default, primary/fg, success/default, surface/card, surface/muted, text/muted, warning/default.

CSS custom properties referenced directly: --ns-avatar-lg, --ns-avatar-md, --ns-avatar-sm, --ns-bg, --ns-border-strong, --ns-card, --ns-fg, --ns-font-sans, --ns-leading-caption, --ns-leading-label, --ns-leading-strong, --ns-muted, --ns-muted-fg, --ns-primary, --ns-primary-fg, --ns-radius-avatar, --ns-radius-full, --ns-size-avatar-lg, --ns-size-avatar-md, --ns-size-avatar-sm, --ns-space-2, --ns-success, --ns-text-2xs, --ns-text-3xs, --ns-text-caption, --ns-text-label, --ns-text-strong, --ns-text-xs, --ns-tracking-caption, --ns-tracking-label, --ns-tracking-strong, --ns-warning, --ns-weight-caption, --ns-weight-label, --ns-weight-strong.

Contract and compatibility

Accessibility pattern: noninteractive presentation

Native DOM attributes pass through where the implementation accepts them.

Design contract values marked planned are not implementation props. The props above describe what ships today.