diff --git a/docs/content/2.elements/4.badge.md b/docs/content/2.elements/4.badge.md
index 0aff386993..ebc4b937c0 100644
--- a/docs/content/2.elements/4.badge.md
+++ b/docs/content/2.elements/4.badge.md
@@ -31,6 +31,8 @@ props:
 
 Use the `color` and `variant` props to change the visual style of the Badge.
 
+- `variant` can be `solid` (default), `outline`, `soft` or `subtle`.
+
 ::component-card
 ---
 props:
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 81f57de726..6b12704806 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -132,7 +132,9 @@ const badge = {
   },
   variant: {
     solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
-    outline: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-10 dark:ring-opacity-20'
+    outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
+    soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
+    subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
   },
   default: {
     size: 'sm',