Avatar
Profile picture, user initials and fallback icon.
A
Installation
CLI
Install the @perceptui/ui package using your preferred package manager.
npx @perceptui/cli@latest add avatarImport from @perceptui/ui
Note: If you have installed @perceptui/ui package, then import Avatar
from @perceptui/ui.
import { Avatar, AvatarImage, AvatarFallback } from "@perceptui/ui";A
API References
| Prop | Type | Description | Default |
|---|---|---|---|
| variant | "solid" | "outline" | "soft" | Form of the Avatar | solid |
| color | string | Color of the Avatar | blue |
| radius | "none"|"sm"|"md"|"lg"|"xl"|"full" | Radius of the Avatar | lg |
| src | string | Link of the image to be used in Avatar | - |
| fallback | ReactNode | - | - |
| className | string | className | _ |
Examples
Variant
Use the variant prop to control the visual style of the avatar.
Solid Variant
A
Outline Variant
A
Soft Variant
A
Color
Use the color prop to control the color of the avatar.
Color with solid variant
A
A
A
A
A
A
A
A
A
A
A
A
Color with outline variant
A
A
A
A
A
A
A
A
A
A
A
A
Color with soft variant
A
A
A
A
A
A
A
A
A
A
A
A
There are more color properties. Take your time to explore
Radius
Use the radius prop to assign a specific radius value.