Avatar
Avatar is a circular identity chip. Give it a name and it renders up to two
initials on a subtle tinted background; give it a src too and it renders the
image, falling back to those initials if the image is absent or fails to load.
Every color comes from the host’s tokens, so it sits native in any host. The
preview below is the real component from @nimblebrain/synapse/ui, live.
import { Avatar } from "@nimblebrain/synapse/ui";
<Avatar name="Jordan Ratner" /><Avatar name="Priya Nair" src="/priya.jpg" size={40} />;Sizes and fallback
Section titled “Sizes and fallback”size sets the diameter in pixels; initials scale with it. When src is
omitted or the image errors, name drives both the initials and the alt text.
<Avatar name="Sam Okoye" size={40} /><Avatar name="Ada Lovelace" src="https://…/ada.jpg" size={40} /><Avatar name="Grace Hopper" size={56} />Avatar extends the native HTMLAttributes for a <span> (minus children),
so className, style, aria-*, and other span attributes pass through.
| Prop | Type | Default |
|---|---|---|
name |
string (required) |
None |
src |
string |
None |
size |
number |
28 |
…rest |
HTMLAttributes<HTMLSpanElement> |
None |