Avatar

A real <img> when there's a picture. Broken or missing images can't be detected in CSS alone, so the fallback swap to initials is the one deliberate piece of JavaScript here, anonError handler, everything else is native image handling.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Unstyled

Same component — Kernel look stripped. See Platforms.

fallback

src

alt

Usage

<Avatar alt="Karl Koch" fallback="KK" />

<kernel-avatar alt="Karl Koch" fallback="KK"></kernel-avatar>

Props

Props for Avatar.
Prop	Type	Default
`fallback`	string (required)	—
`src`	string	—
`alt`	string	—