Skip to main content

Avatar

Avatar — Prism component.

Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggle
Live demo
Open ↗

When to use

Avatar — Prism component.

Accessibility

Fully keyboard operable: Tab to focus, Enter/Space to activate. The visible focus ring uses --focus-ring — never remove it. Provide an accessible label (aria-label) for icon-only controls.

Import

const { Avatar } = window.PrismDesignSystem_39d121;

Props

PropTypeRequiredDescription
namestringDrives alt text and the initials fallback.
srcstring | nullImage URL; falls back to initials when absent or broken.
size"sm" | "md" | "lg"
classNamestring