docs: update badges

docs/content/1.getting-started/3.theming.md

@@ -1,5 +1,7 @@
 ---
 description: 'Learn how to customize the look and feel of the components.'
+navigation:
+  badge: 'New'
 ---
 
 ## Overview

docs/content/2.elements/3.avatar.md

@@ -4,6 +4,8 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Avatar.vue
+navigation:
+  badge: 'New'
 ---
 
 ## Usage

docs/content/2.elements/5.button.md

@@ -4,6 +4,8 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Button.vue
+navigation:
+  badge: 'New'
 ---
 
 ## Usage
@@ -276,7 +278,7 @@ excludedProps:
 To stack buttons as a group, use the `ButtonGroup` component.
 
 - To size all the buttons equally, pass the `size` prop
-- To change the orientation of the buttons, set the `orientation` prop to `vertical`
+- To change the orientation of the buttons, set the `orientation` prop to `vertical` :u-badge{label="New" class="!rounded-full" variant="subtle"}
 - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
 
 ::component-card{slug="ButtonGroup"}

docs/content/3.forms/10.form.md

@@ -4,6 +4,8 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Form.vue
+navigation:
+  badge: 'New'
 ---
 
 ## Usage
@@ -232,7 +234,7 @@ async function submit (event: FormSubmitEvent<any>) {
 ```
 ::
 
-### Valibot
+### Valibot :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
 ::component-example
 #default

docs/content/5.navigation/4.tabs.md

@@ -4,6 +4,8 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
+navigation:
+  badge: 'New'
 ---
 
 ## Usage

docs/content/6.overlays/1.modal.md

@@ -7,6 +7,8 @@ links:
   - label: 'Dialog'
     icon: i-simple-icons-headlessui
     to: 'https://headlessui.com/vue/dialog'
+navigation:
+  badge: 'New'
 ---
 
 ## Usage
@@ -178,7 +180,7 @@ defineShortcuts({
 </script>
 ```
 
-### Fullscreen
+### Fullscreen :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
 
 Set the `fullscreen` prop to `true` to enable it.