docs(avatar): use chip prop in example (#4551)

Author: hywax

docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue

@@ -1,24 +1,21 @@
 <template>
   <UAvatarGroup>
-    <UChip inset color="success">
-      <UAvatar
-        src="https://github.com/benjamincanac.png"
-        alt="Benjamin Canac"
-      />
-    </UChip>
+    <UAvatar
+      src="https://github.com/benjamincanac.png"
+      alt="Benjamin Canac"
+      :chip="{ inset: true, color: 'success' }"
+    />
 
-    <UChip inset color="warning">
-      <UAvatar
-        src="https://github.com/romhml.png"
-        alt="Romain Hamel"
-      />
-    </UChip>
+    <UAvatar
+      src="https://github.com/romhml.png"
+      alt="Romain Hamel"
+      :chip="{ inset: true, color: 'warning' }"
+    />
 
-    <UChip inset color="error">
-      <UAvatar
-        src="https://github.com/noook.png"
-        alt="Neil Richter"
-      />
-    </UChip>
+    <UAvatar
+      src="https://github.com/noook.png"
+      alt="Neil Richter"
+      :chip="{ inset: true, color: 'error' }"
+    />
   </UAvatarGroup>
 </template>

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

@@ -84,6 +84,23 @@ props:
 The `alt` prop is passed to the `img` element as the `alt` attribute.
 ::
 
+### Chip
+
+Use the `chip` prop to display a chip around the Avatar.
+
+::component-code
+---
+prettier: true
+ignore:
+  - src
+  - chip.inset
+props:
+  src: 'https://github.com/benjamincanac.png'
+  chip:
+    inset: true
+---
+::
+
 ## Examples
 
 ### With tooltip
@@ -92,12 +109,6 @@ You can use a [Tooltip](/components/tooltip) component to display a tooltip when
 
 :component-example{name="avatar-tooltip-example"}
 
-### With chip
-
-You can use a [Chip](/components/chip) component to display a chip around the Avatar.
-
-:component-example{name="avatar-chip-example"}
-
 ## API
 
 ### Props