Avatar
User profile image with initials fallback, colourful mesh background, and status indicator. Pass a model object with name and optional profile_image to render.
Default
Auto-generates initials and a hashed mesh-gradient background from the name.
OM
JL
IN
With image
Pass a profile_image map keyed by size (sm, md, lg).
Status indicator
Add a coloured dot for presence or status.
JL
JL
JL
JL
Rounding
circle for full round, rounded prop for any Tailwind rounded class.
IN
IN
IN
IN
API Reference
Props, events, and slots for each sub-component.
Avatar
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| model | { name?: string, profile_image?: Record<string, string> } | — | User-like object. Falls back to initials when profile_image is missing. |
| size | "sm" | "md" | "lg" | "sm" | Key used to pick the URL from profile_image. |
| rounded | string | "rounded-lg" | Tailwind rounded class. Use squircle for icon-style avatars. |
| circle | boolean | false | Force rounded-full. |
| colorful | boolean | true | Enable the auto-generated mesh-gradient background for initials. |
| gradientFrame | boolean | false | Instagram-style rotating gradient frame around the avatar. |
| indicator | "success" | "info" | "warning" | "destructive" | "primary" | null | Coloured dot in the bottom-right corner. |
| noTooltip | boolean | false | Disable name tooltip when inside AvatarGroup. |