Avatar

User avatars. Free, MIT · Basics › Labels and tooltips

Installation

npx valyro-cli@latest add avatar

npx shadcn@latest add https://valyro.xyz/r/avatar.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Avatar } from 'valyro-ui';

Prop	Type	Default
`src`	`string`		Image URL. When omitted or failing to load, initials (or `fallback`) are shown instead.
`name`	`string`	`''`	Used for alt text, initials and the fallback color.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`		Avatar dimensions, from 20px (`xs`) to 64px (`xl`). Inside an AvatarGroup, defaults to the group's size.
`shape`	`'circle' \| 'square'`	`'circle'`	Circle, or a square with corners rounded to a quarter of the size.
`status`	`'online' \| 'offline' \| 'busy' \| 'away'`		Presence dot in the corner; also appended to the accessible name.
`statusLabel`	`string`		Spoken status text appended to the name, e.g. "en ligne". Defaults to the `status` value.
`fallback`	`ReactNode`		Custom fallback (e.g. an icon) instead of initials.

Badge — Status labels and tags
Tag — Removable and clickable tags, groups with +N
Tooltip — Hover and focus hints
Separator — Dividers
Button — Buttons in every variant
Icon Button — Icon-only button
Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
Button Group — Grouped buttons
Copy to Clipboard — Copy with confirmation
Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons
Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words
Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit

Previous: Tag · Next: Tooltip · All Basics