Library/atoms/Avatar

Avatar

atom

Profile image with fallback initials. v3 compound pattern (Avatar / Avatar.Image / Avatar.Fallback).

Added in 0.1.0Last modified in 0.6.0

Live Preview

ThemeDefault Light

Device

Desktop

Props

Prop	Type	Description	Required
size	"sm" \| "md" \| "lg"	Avatar size	yes
color	"default" \| "accent" \| "success" \| "warning" \| "danger"	Color variant	yes
variant	"default" \| "soft"	Visual style	yes

Usage

import { Avatar } from '@qsp-life/particle/free';

<Avatar color="accent">
  <Avatar.Image src="/photo.jpg" alt="Maria" />
  <Avatar.Fallback>MG</Avatar.Fallback>
</Avatar>

Import

import { Avatar } from '@qsp-life/particle/free';