diff --git a/apps/v4/content/docs/components/base/button.mdx b/apps/v4/content/docs/components/base/button.mdx
index 1f2807e39d..6d25bb4c43 100644
--- a/apps/v4/content/docs/components/base/button.mdx
+++ b/apps/v4/content/docs/components/base/button.mdx
@@ -150,4 +150,4 @@ The `Button` component is a wrapper around the `button` element that adds a vari
 | Prop      | Type                                                                          | Default     |
 | --------- | ----------------------------------------------------------------------------- | ----------- |
 | `variant` | `"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"` | `"default"` |
-| `size`    | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`               | `"default"` |
+| `size`    | `"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"` | `"default"` |
diff --git a/apps/v4/content/docs/components/radix/button.mdx b/apps/v4/content/docs/components/radix/button.mdx
index 4c627a024b..4dde474c1b 100644
--- a/apps/v4/content/docs/components/radix/button.mdx
+++ b/apps/v4/content/docs/components/radix/button.mdx
@@ -150,5 +150,5 @@ The `Button` component is a wrapper around the `button` element that adds a vari
 | Prop      | Type                                                                          | Default     |
 | --------- | ----------------------------------------------------------------------------- | ----------- |
 | `variant` | `"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"` | `"default"` |
-| `size`    | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`               | `"default"` |
+| `size`    | `"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"` | `"default"` |
 | `asChild` | `boolean`                                                                     | `false`     |
diff --git a/apps/v4/examples/base/button-size.tsx b/apps/v4/examples/base/button-size.tsx
index 510d07d074..cec3e0450d 100644
--- a/apps/v4/examples/base/button-size.tsx
+++ b/apps/v4/examples/base/button-size.tsx
@@ -4,6 +4,14 @@ import { ArrowUpRightIcon } from "lucide-react"
 export default function ButtonSize() {
   return (
     <div className="flex flex-col items-start gap-8 sm:flex-row">
+      <div className="flex items-start gap-2">
+        <Button size="xs" variant="outline">
+          Extra Small
+        </Button>
+        <Button size="icon-xs" aria-label="Submit" variant="outline">
+          <ArrowUpRightIcon />
+        </Button>
+      </div>
       <div className="flex items-start gap-2">
         <Button size="sm" variant="outline">
           Small
diff --git a/apps/v4/examples/radix/button-size.tsx b/apps/v4/examples/radix/button-size.tsx
index 7a2a262a61..3fdc469724 100644
--- a/apps/v4/examples/radix/button-size.tsx
+++ b/apps/v4/examples/radix/button-size.tsx
@@ -4,6 +4,14 @@ import { ArrowUpRightIcon } from "lucide-react"
 export default function ButtonSize() {
   return (
     <div className="flex flex-col items-start gap-8 sm:flex-row">
+      <div className="flex items-start gap-2">
+        <Button size="xs" variant="outline">
+          Extra Small
+        </Button>
+        <Button size="icon-xs" aria-label="Submit" variant="outline">
+          <ArrowUpRightIcon />
+        </Button>
+      </div>
       <div className="flex items-start gap-2">
         <Button size="sm" variant="outline">
           Small
diff --git a/apps/v4/examples/radix/input-otp-pattern.tsx b/apps/v4/examples/radix/input-otp-pattern.tsx
index da6536ef69..ea27bef8dc 100644
--- a/apps/v4/examples/radix/input-otp-pattern.tsx
+++ b/apps/v4/examples/radix/input-otp-pattern.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Field, FieldLabel } from "@/examples/radix/ui/field"
 import {
   InputOTP,