docs(content): move shortcuts into composables/

docs/content/2.composables/1.define-shortcuts.md

@@ -1,4 +1,5 @@
 ---
+title: defineShortcuts
 description: 'Learn how to display and define keyboard shortcuts in your app.'
 ---
 
@@ -124,18 +125,3 @@ defineShortcuts({
   '?': () => openHelpModal()
 })
 ```
-
-## `useShortcuts`
-
-To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
-
-```vue
-<script setup lang="ts">
-const { metaSymbol } = useShortcuts()
-</script>
-
-<template>
-  <UKbd>{{ metaSymbol }}</UKbd>
-</template>
-```
-_`metaSymbol` will display either `⌘` on MacOS or `Ctrl` on any other OS_

docs/content/3.components/badge.md

@@ -53,6 +53,21 @@ slots:
 ---
 ::
 
+## Examples
+
+### `class` prop
+
+Use the `class` prop to override the base styles of the Badge.
+
+::component-code
+---
+props:
+  class: 'font-bold rounded-full'
+slots:
+  default: Badge
+---
+::
+
 ## API
 
 ### Props

docs/content/3.components/button.md

@@ -145,6 +145,40 @@ slots:
 Button
 ::
 
+## Examples
+
+### `class` prop
+
+Use the `class` prop to override the base styles of the Button.
+
+::component-code
+---
+props:
+  class: 'font-bold rounded-full'
+slots:
+  default: Button
+---
+::
+
+### `ui` prop
+
+Use the `ui` prop to override the slots styles of the Button.
+
+::component-code
+---
+ignore:
+  - ui
+props:
+  icon: i-heroicons-rocket-launch
+  color: gray
+  variant: outline
+  ui:
+    leadingIcon: 'text-primary-500 dark:text-primary-400'
+slots:
+  default: Button
+---
+::
+
 ## API
 
 ### Props