Avatar
Picture, initials or a fallback glyph, with a status dot.
import
import { Avatar } from '@joshicodes/cock';Sizes and status
Initials come from name; the glyph is the fallback when there is neither.
LW TF MV JK
IB OP PR
Behaviour
- Falls back to initials from `name` when `src` is missing or fails to load, and to a neutral glyph when there is no name either.
- Overlapping a row of avatars is a `-space-x-2` on the wrapper and a ring on each one; there is no separate group component.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Avatar
| Prop | Type | Default |
|---|---|---|
src | string | — |
alt | string | — |
name Falls back to initials, then to a neutral glyph. | string | — |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
shape | 'circle' | 'square' | 'circle' |
status | 'online' | 'busy' | 'away' | 'offline' | — |
class | string | — |