feat(Alert): new component (#449)

docs/content/2.elements/4.badge.md

@@ -0,0 +1,137 @@
+---
+description: Display a short text to represent a status or a category.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Badge.vue
+---
+
+## Usage
+
+Use the default slot to set the text of the Badge.
+
+::component-card
+---
+code: Badge
+---
+
+Badge
+::
+
+You can also use the `label` prop:
+
+::component-card
+---
+props:
+  label: Badge
+---
+::
+
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Badge.
+
+::component-card
+---
+props:
+  color: 'primary'
+  variant: 'solid'
+---
+
+Badge
+::
+
+Besides all the colors from the `ui.colors` object, you can also use the `white` and `black` colors with their pre-defined variants.
+
+#### White :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+::component-card
+---
+props:
+  color: 'white'
+  variant: 'solid'
+ui:
+  variant:
+    solid: 1
+excludedProps:
+  - color
+---
+
+Badge
+::
+
+#### Gray :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+::component-card
+---
+props:
+  color: 'gray'
+  variant: 'solid'
+ui:
+  variant:
+    solid: 1
+excludedProps:
+  - color
+---
+
+Badge
+::
+
+#### Black :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"}
+
+::component-card
+---
+props:
+  color: 'black'
+  variant: 'solid'
+ui:
+  variant:
+    solid: 1
+    link: 1
+excludedProps:
+  - color
+---
+
+Badge
+::
+
+### Size
+
+Use the `size` prop to change the size of the Badge.
+
+::component-card
+---
+props:
+  size: 'sm'
+---
+
+Badge
+::
+
+### Rounded
+
+To customize the border radius of the Badge, you can use the `ui` prop.
+
+::component-card
+---
+props:
+  ui:
+    rounded: 'rounded-full'
+excludedProps:
+  - ui
+---
+
+Badge
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+You can customize the whole [preset](#preset) by using the `ui` prop.
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset