WireUI
WireUI
Avatar

The avatar component will display an image, a label, or a default SVG placeholder.
You can use this component to build your features like profile pictures.

Avatar Image 
1<x-avatar xs src="https://picsum.photos/300?size=xs" />
2<x-avatar sm src="https://picsum.photos/300?size=sm" />
3<x-avatar md src="https://picsum.photos/300?size=md" />
4<x-avatar lg src="https://picsum.photos/300?size=lg" />
5<x-avatar xl src="https://picsum.photos/300?size=xl" />
Avatar Label
AB
AB
AB
AB
AB 
1<x-avatar xs label="AB" />
2<x-avatar sm label="AB" />
3<x-avatar md label="AB" />
4<x-avatar lg label="AB" />
5<x-avatar xl label="AB" />
Avatar Squared 
1<x-avatar xs squared src="https://picsum.photos/300?size=xs" />
2<x-avatar sm squared src="https://picsum.photos/300?size=sm" />
3<x-avatar md squared src="https://picsum.photos/300?size=md" />
4<x-avatar lg squared src="https://picsum.photos/300?size=lg" />
5<x-avatar xl squared src="https://picsum.photos/300?size=xl" />
You can customize the avatar size by adding the size css classes into the size attribute.
Avatar Sizes
AB
AB
AB
AB
AB
AB 
1<x-avatar xs label="AB" />
2<x-avatar sm label="AB" />
3<x-avatar md label="AB" />
4<x-avatar lg label="AB" />
5<x-avatar xl label="AB" />
6<x-avatar size="w-18 h-18 text-2xl" label="AB" />
7<x-avatar size="w-24 h-24" src="https://picsum.photos/300?size=24x" />
Avatar Group 
1<x-avatar xs label="AB" />
2<x-avatar sm label="AB" />
3<x-avatar md label="AB" />
4<x-avatar lg label="AB" />
5<x-avatar xl label="AB" />
6<x-avatar size="w-18 h-18 text-2xl" label="AB" />
7<x-avatar size="w-24 h-24" src="https://picsum.photos/300?size=24x" />
If no text and no img is given, the avatar will display a default SVG placeholder.
Avatar Placeholder 
1<x-avatar xs label="AB" />
2<x-avatar sm label="AB" />
3<x-avatar md label="AB" />
4<x-avatar lg label="AB" />
5<x-avatar xl label="AB" />
6<x-avatar size="w-18 h-18 text-2xl" label="AB" />
7<x-avatar size="w-24 h-24" src="https://picsum.photos/300?size=24x" />
Avatar Options

Options

Prop Required Default Type
xs false false boolean
sm false false boolean
md false false boolean
lg false false boolean
xl false false boolean
squared false false boolean
size false md string|null
label false null string|null
src false null string|null
border false border border-gray-200 dark:border-secondary-500 string|null