diff --git a/docs/content/2.components/button.md b/docs/content/2.components/button.md
index 3effecb1..f1fbc33b 100644
--- a/docs/content/2.components/button.md
+++ b/docs/content/2.components/button.md
@@ -8,13 +8,174 @@ links:
 
 ## Usage
 
-## Examples
+Use the default slot to set the label of the Button.
+
+::component-code
+---
+slots:
+  default: Button
+---
+::
+
+You can achieve the same result by using the `label` prop.
+
+::component-code
+---
+props:
+  label: Button
+---
+::
+
+### Link
+
+You can pass any property from [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `target`, etc.
+
+::component-code
+---
+ignore:
+  - label
+  - target
+props:
+  to: https://github.com/nuxt/ui
+  target: _blank
+slots:
+  default: Button
+---
+::
+
+### Style
+
+Use the `color` and `variant` props to change the style of the Button.
+
+::component-code
+---
+props:
+  color: gray
+  variant: solid
+slots:
+  default: Button
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Button.
+
+::component-code
+---
+props:
+  size: md
+slots:
+  default: Button
+---
+::
+
+### Icon
+
+Use the `icon` prop to show any icon from [Iconify](https://icones.js.org).
+
+::component-code
+---
+props:
+  icon: i-heroicons-rocket-launch
+  size: md
+  color: primary
+  variant: solid
+slots:
+  default: Button
+---
+::
+
+Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
+
+::component-code
+---
+props:
+  leading-icon: ''
+  trailing-icon: i-heroicons-arrow-right
+  size: md
+slots:
+  default: Button
+---
+::
+
+The `label` as prop or slot is optional so you can use the Button as an icon-only button.
+
+::component-code
+---
+props:
+  icon: i-heroicons-magnifying-glass
+  size: md
+  color: primary
+  variant: solid
+---
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon and disable the Button.
+
+Use the `loading-icon` prop or globally in `appConfig.ui.icons.loading` to set a different icon.
+
+::component-code
+---
+props:
+  loading: true
+  loading-icon: ''
+  trailing: false
+slots:
+  default: Button
+---
+
+Button
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Button.
+
+::component-code
+---
+props:
+  disabled: true
+slots:
+  default: Button
+---
+
+Button
+::
 
 ## API
 
 ### Props
 
-:component-props
+::component-props
+---
+ignore:
+  - to
+  - target
+  - activeClass
+  - inactiveClass
+  - exactActiveClass
+  - ariaCurrentValue
+  - href
+  - rel
+  - noRel
+  - prefetch
+  - noPrefetch
+  - prefetchedClass
+  - replace
+  - exact
+  - exactQuery
+  - exactHash
+  - external
+  - active
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/Link.vue#L13"}
+The `Button` component extends the `Link` component. Check out the source code on GitHub.
+::
 
 ### Slots
 
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index b700d2a9..734f065a 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -117,7 +117,10 @@ export default defineNuxtConfig({
 
   hooks: {
     'components:extend': (components) => {
-      const globals = components.filter(c => ['UBadge'].includes(c.pascalName))
+      const globals = components.filter(c => [
+        'UBadge',
+        'UButton'
+      ].includes(c.pascalName))
 
       globals.forEach(c => c.global = 'sync')
     }