docs(avatar): update

docs/app/components/content/examples/avatar/AvatarChipExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <UChip inset>
+    <UAvatar
+      src="https://avatars.githubusercontent.com/u/739984?v=4"
+      alt="Benjamin Canac"
+    />
+  </UChip>
+</template>

docs/app/components/content/examples/avatar/AvatarTooltipExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <UTooltip text="Benjamin Canac">
+    <UAvatar
+      src="https://avatars.githubusercontent.com/u/739984?v=4"
+      alt="Benjamin Canac"
+    />
+  </UTooltip>
+</template>

docs/content/3.components/alert.md

@@ -67,7 +67,7 @@ Use the `close` prop to display a [Button](/components/button) to dismiss the Al
 A `close` event will be emitted when the close button is clicked.
 ::
 
-Use the `close-icon` prop to customize the close button icon. Defaults to `i-heroicons-x-mark-20-solid`.
+Use the `close-icon` prop to customize this icon. Defaults to `i-heroicons-x-mark-20-solid`.
 
 ::component-code
 ---

docs/content/3.components/avatar.md

@@ -1,5 +1,5 @@
 ---
-description: Display an image that represents a resource or a group of resources.
+description: Display an image element with fallback.
 links:
   - label: Avatar
     icon: i-custom-radix-vue
@@ -11,8 +11,83 @@ links:
 
 ## Usage
 
+Use the `src` prop to set the image URL. You can pass any property from HTML `<img>` element such as `alt`, `loading`, etc.
+
+::component-code
+---
+props:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+---
+::
+
+### Size
+
+Use the `size` prop to set the size of the Avatar.
+
+::component-code
+---
+ignore:
+  - src
+props:
+  src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  size: md
+---
+::
+
+### Icon
+
+Use the `icon` prop to display a fallback [Icon](/components/icon).
+
+::component-code
+---
+props:
+  icon: 'i-heroicons-photo'
+  size: md
+---
+::
+
+### Text
+
+Use the `text` prop to display a fallback text.
+
+::component-code
+---
+props:
+  text: '+1'
+  size: md
+---
+::
+
+### Alt
+
+When no icon or text is provided, the **initials** of the `alt` prop will be used as fallback.
+
+::component-code
+---
+props:
+  alt: 'Benjamin Canac'
+  size: md
+---
+::
+
+::tip
+The `alt` prop will be used as the `alt` attribute of the image.
+::
+
 ## Examples
 
+### With tooltip
+
+You can use the [Tooltip](/components/tooltip) component to display a tooltip when hovering the Avatar.
+
+:component-example{name="AvatarTooltipExample"}
+
+### With chip
+
+You can use the [Chip](/components/chip) component to display a chip around the Avatar.
+
+:component-example{name="AvatarChipExample"}
+
 ## API
 
 ### Props

docs/nuxt.config.ts

@@ -118,6 +118,7 @@ export default defineNuxtConfig({
     'components:extend': (components) => {
       const globals = components.filter(c => [
         'UAlert',
+        'UAvatar',
         'UBadge',
         'UButton',
         'UIcon',