Avatar

Get started with the basics of using the Avatar component.

experimental

---
import Avatar from '@/components/Avatar.astro';
---

<Avatar />

Variants

Rocketship Avatar components come with different variants. You can customize the components by changing the variant.

variant	description	example	code
solid	Solid Avatar		<Avatar variant="solid" />
soft	Soft Avatar		<Avatar variant="soft" />
outline	Outline Avatar		<Avatar variant="outline" />

Sizes

Rocketship components use a numeric scale for sizes. You can customize the Avatar by changing the size.

size	description	example	code
1	Tiny Avatar		<Avatar size="1" />
3	Small Avatar		<Avatar size="3" />
5	Medium Avatar		<Avatar size="5" />
7	Large Avatar		<Avatar size="7" />

Note: Sizes 2, 4, 6, and 8 are also available for more fine-grained control.

Colors

Rocketship Avatar components come with different colors based on the Radix color system. You can customize the components by changing the color.

color	description	example	code
indigo	Indigo Color		<Avatar color="indigo" />
blue	Blue Color		<Avatar color="blue" />
green	Green		<Avatar color="green" />
red	Red		<Avatar color="red" />
orange	Orange Color		<Avatar color="orange" />
purple	Purple Color		<Avatar color="purple" />
gray	Neutral Color		<Avatar color="gray" />

Image Source

You can provide an image source for the Avatar:

<Avatar src="path to image" alt="User Avatar" size="5" />

Initials

If no image is provided, you can display initials:

AA

<Avatar initials="AA" color="blue" size="5" />

Combining Properties

You can combine different properties to create custom avatars:

<Avatar size="6" color="cyan" variant="outline" initials="AA" />

This will create a medium-large, cyan-colored outline avatar with the initials “AA”.

AA