Components

Avatar

Display a user image or initials with optional mask shapes.

UiAvatar shows an image (src) or falls back to initials, with an optional decorative maskShape.

Add an avatar

<template>
  <UiAvatar src="/users/jane.jpg" alt="Jane Doe" size="md" />
  <UiAvatar initials="JD" size="lg" />
</template>

<template>
  <UiAvatar src="/users/jane.jpg" mask-shape="gem" />
  <UiAvatar initials="GG" mask-shape="cookie-9" mask-stretch />
</template>

Prop	Type	Default	Description
`src`	`string`	—	Image URL.
`alt`	`string`	`'Avatar'`	Accessible name.
`initials`	`string \| null`	—	Fallback initials when no image is set.
`size`	`'sm' \| 'md' \| 'lg' \| 'navbar' \| 'menu'`	—	Avatar size.
`maskShape`	`'arch' \| 'pill' \| 'sunny' \| 'gem' \| 'cookie-6' \| 'cookie-9' \| 'cookie-12' \| 'clover-4' \| 'clover-8' \| 'bum' \| null`	—	Decorative mask.
`maskStretch`	`boolean`	`false`	Stretch the mask to 115%.

Alert

Communicate status with banners, tonal alerts, snackbars, and toasts.

Badge

Label and categorize with UiBadge, or show counts with UiBadgeGroup.