docs(button-group): update

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

@@ -6,12 +6,14 @@
         alt="Benjamin Canac"
       />
     </UChip>
+
     <UChip inset color="amber">
       <UAvatar
         src="https://avatars.githubusercontent.com/u/25613751?v=4"
         alt="Romain Hamel"
       />
     </UChip>
+
     <UChip inset color="red">
       <UAvatar
         src="https://avatars.githubusercontent.com/u/19751938?v=4"

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

@@ -11,6 +11,7 @@
         alt="Benjamin Canac"
       />
     </ULink>
+
     <ULink
       to="https://github.com/romhml"
       target="_blank"
@@ -22,6 +23,7 @@
         alt="Romain Hamel"
       />
     </ULink>
+
     <ULink
       to="https://github.com/noook"
       target="_blank"

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

@@ -6,12 +6,14 @@
         alt="Benjamin Canac"
       />
     </UTooltip>
+
     <UTooltip text="romhml">
       <UAvatar
         src="https://avatars.githubusercontent.com/u/25613751?v=4"
         alt="Romain Hamel"
       />
     </UTooltip>
+
     <UTooltip text="noook">
       <UAvatar
         src="https://avatars.githubusercontent.com/u/19751938?v=4"

docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const items = [{
+  label: 'Team',
+  icon: 'i-heroicons-users'
+}, {
+  label: 'Invite users',
+  icon: 'i-heroicons-user-plus',
+  children: [{
+    label: 'Invite by email',
+    icon: 'i-heroicons-paper-airplane'
+  }, {
+    label: 'Invite by link',
+    icon: 'i-heroicons-link'
+  }]
+}, {
+  label: 'New team',
+  icon: 'i-heroicons-plus'
+}]
+</script>
+
+<template>
+  <UButtonGroup>
+    <UButton color="gray" variant="subtle" label="Settings" />
+
+    <UDropdownMenu :items="items">
+      <UButton
+        color="gray"
+        variant="outline"
+        icon="i-heroicons-chevron-down-20-solid"
+      />
+    </UDropdownMenu>
+  </UButtonGroup>
+</template>

docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue

@@ -0,0 +1,13 @@
+<template>
+  <UButtonGroup>
+    <UInput color="gray" variant="outline" placeholder="Enter token" />
+
+    <UTooltip text="Copy to clipboard">
+      <UButton
+        color="gray"
+        variant="subtle"
+        icon="i-heroicons-clipboard-document"
+      />
+    </UTooltip>
+  </UButtonGroup>
+</template>

docs/content/3.components/avatar-group.md

@@ -15,6 +15,7 @@ Wrap multiple [Avatar](/components/avatar) within an AvatarGroup to stack them.
 ---
 slots:
   default: |
+
     <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
     <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
     <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />
@@ -34,6 +35,7 @@ props:
   size: md
 slots:
   default: |
+
     <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" />
     <UAvatar src="https://avatars.githubusercontent.com/u/25613751?v=4" alt="Romain Hamel" />
     <UAvatar src="https://avatars.githubusercontent.com/u/19751938?v=4" alt="Neil Richter" />

docs/content/3.components/button-group.md

@@ -9,8 +9,87 @@ links:
 
 ## Usage
 
+Wrap multiple [Button](/components/button) within a ButtonGroup to group them together.
+
+::component-code
+---
+slots:
+  default: |
+
+    <UButton color="gray" variant="subtle" label="Button" />
+    <UButton color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
+---
+:u-button{color="gray" variant="subtle" label="Button"}
+:u-button{color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
+::
+
+### Size
+
+Use the `size` prop to change the size of all the buttons.
+
+::component-code
+---
+props:
+  size: md
+slots:
+  default: |
+
+    <UButton color="gray" variant="subtle" label="Button" />
+    <UButton color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
+---
+:u-button{color="gray" variant="subtle" label="Button"}
+:u-button{color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
+::
+
+### Orientation
+
+Use the `orientation` prop to change the orientation of the buttons.
+
+::component-code
+---
+props:
+  orientation: vertical
+slots:
+  default: |
+
+    <UButton color="gray" variant="subtle" label="Submit" />
+    <UButton color="gray" variant="outline" label="Cancel" />
+---
+:u-button{color="gray" variant="subtle" label="Submit"}
+:u-button{color="gray" variant="outline" label="Cancel"}
+::
+
 ## Examples
 
+### With input
+
+You can use components like [Input](/components/input), [InputMenu](/components/input-menu), [Select](/components/select) [SelectMenu](/components/select-menu), etc. within a button group.
+
+::component-code
+---
+slots:
+  default: |
+
+    <UInput color="gray" variant="outline" placeholder="Enter token" />
+
+    <UButton color="gray" variant="subtle" icon="i-heroicons-clipboard-document" />
+---
+:u-input{color="gray" variant="outline" placeholder="Enter token"}
+:u-button{color="gray" variant="subtle" icon="i-heroicons-clipboard-document"}
+::
+
+### With tooltip
+
+You can use a tooltip within a button group.
+
+:component-example{name="button-group-tooltip-example"}
+
+### With dropdown
+
+You can use a dropdown menu within a button group.
+
+:component-example{name="button-group-dropdown-example"}
+
 ## API
 
 ### Props

docs/nuxt.config.ts

@@ -122,9 +122,12 @@ export default defineNuxtConfig({
         'UAvatarGroup',
         'UBadge',
         'UButton',
+        'UButtonGroup',
         'UIcon',
+        'UInput',
         'UKbd',
-        'ULink'
+        'ULink',
+        'UProgress'
       ].includes(c.pascalName))
 
       globals.forEach(c => c.global = 'sync')