components / avatar

Avatar

Round user picture that falls back to initials when there is no image or it fails to load.

How to use

`name` is required: it gives the initials (first and last words) and the accessible label (`role="img"`), while the image is decorative. Pass `src` for a picture; if it is missing or breaks, the initials show.

preview

Avatar.tsx

import { Avatar } from "vaiperui";
 
<Avatar name="Camila Souza" />
<Avatar name="Yuki Tanaka" src="/avatars/yuki.jpg" size="lg" />
<Avatar name="Ada Lovelace" variantColor="success" />

Sizes

preview

sizes.tsx

<Avatar name="Ada Lovelace" size="sm" />
<Avatar name="Ada Lovelace" size="md" />
<Avatar name="Ada Lovelace" size="lg" />

Colors

preview

primary

success

warning

danger

colors.tsx

<Avatar name="Ada Lovelace" variantColor="primary" />
<Avatar name="Ada Lovelace" variantColor="success" />
<Avatar name="Ada Lovelace" variantColor="warning" />
<Avatar name="Ada Lovelace" variantColor="danger" />

Radius

preview

none

full

radius.tsx

<Avatar name="Ada Lovelace" radius="none" />
<Avatar name="Ada Lovelace" radius="sm" />
<Avatar name="Ada Lovelace" radius="md" />
<Avatar name="Ada Lovelace" radius="lg" />
<Avatar name="Ada Lovelace" radius="full" />

Custom color

preview

Orange

Violet

custom-color.tsx

<Avatar name="Ada Lovelace" customColor="#ff6600" />
<Avatar name="Ada Lovelace" customColor={{ light: "#a855f7", dark: "#fde047" }} />

Props

Prop	Values	Default	Description
name	string	required	Full name: initials and accessible label
src	string	none	Image URL; initials show if missing or broken
size	sm \| md \| lg	md	32, 40 or 56px
radius	none \| sm \| md \| lg \| full	full	Corner rounding
variantColor	primary \| success \| warning \| danger	none	Tints the initials fallback (neutral when omitted)
customColor	string \| { light, dark }	none	Any CSS color (or a pair per theme) for the initials fallback
(native)	span	none	Every native prop of the element, className, ref, etc.