diff --git a/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue b/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue
index 74a792e0..a4f66443 100644
--- a/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue
+++ b/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue
@@ -6,12 +6,14 @@
alt="Benjamin Canac"
/>
+
+
+
+
+
+
+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'
+}]
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue b/docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue
new file mode 100644
index 00000000..940c288e
--- /dev/null
+++ b/docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
diff --git a/docs/content/3.components/avatar-group.md b/docs/content/3.components/avatar-group.md
index 723fc127..e67de270 100644
--- a/docs/content/3.components/avatar-group.md
+++ b/docs/content/3.components/avatar-group.md
@@ -15,6 +15,7 @@ Wrap multiple [Avatar](/components/avatar) within an AvatarGroup to stack them.
---
slots:
default: |
+
@@ -34,6 +35,7 @@ props:
size: md
slots:
default: |
+
diff --git a/docs/content/3.components/button-group.md b/docs/content/3.components/button-group.md
index 48324954..994f1803 100644
--- a/docs/content/3.components/button-group.md
+++ b/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: |
+
+
+
+---
+: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: |
+
+
+
+---
+: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: |
+
+
+
+---
+: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: |
+
+
+
+
+---
+: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
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index eff74dc2..8ddf3f6f 100644
--- a/docs/nuxt.config.ts
+++ b/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')