diff --git a/docs/content/2.elements/5.button.md b/docs/content/2.elements/5.button.md
index ec9e4e3f..37326ae1 100644
--- a/docs/content/2.elements/5.button.md
+++ b/docs/content/2.elements/5.button.md
@@ -310,6 +310,23 @@ code: |
 :u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"}
 ::
 
+This can also work with an [Input](/forms/input) component for example:
+
+::component-card{slug="ButtonGroup"}
+---
+props:
+  size: 'sm'
+  orientation: 'horizontal'
+code: |
+  <UInput />
+  <UButton icon="i-heroicons-clipboard-document" color="gray" />
+---
+
+#default
+:u-input
+:u-button{icon="i-heroicons-clipboard-document" color="gray"}
+::
+
 ## Slots
 
 ### `leading`