diff --git a/README.md b/README.md
index c972a96ac4..35657b37e0 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ A set of beautifully designed components that you can customize, extend, and bui
 
 ## Documentation
 
-Visit http://ui.shadcn.com/docs to view the documentation.
+Visit https://ui.shadcn.com/docs to view the documentation.
 
 ## Contributing
 
@@ -14,4 +14,4 @@ Please read the [contributing guide](/CONTRIBUTING.md).
 
 ## License
 
-Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
+Licensed under the [MIT license](./LICENSE.md).
diff --git a/apps/v4/content/docs/changelog/2025-06-calendar.mdx b/apps/v4/content/docs/changelog/2025-06-calendar.mdx
index 08791ee63a..8fc86a29d0 100644
--- a/apps/v4/content/docs/changelog/2025-06-calendar.mdx
+++ b/apps/v4/content/docs/changelog/2025-06-calendar.mdx
@@ -6,9 +6,7 @@ date: 2025-06-06
 
 We've upgraded the `Calendar` component to the latest version of [React DayPicker](https://daypicker.dev).
 
-This is a major upgrade and includes a lot of new features and improvements. We've also built a collection of 30+ calendar blocks that you can use to build your own calendar components.
-
-See all calendar blocks in the [Blocks Library](/blocks/calendar) page.
+This is a major upgrade and includes a lot of new features and improvements.
 
 <Image src="/images/calendar-2.png" alt="Calendar" width={676} height={895} />
 
diff --git a/apps/v4/content/docs/components/base/button.mdx b/apps/v4/content/docs/components/base/button.mdx
index 4fdf651371..876196e1fe 100644
--- a/apps/v4/content/docs/components/base/button.mdx
+++ b/apps/v4/content/docs/components/base/button.mdx
@@ -137,9 +137,9 @@ To create a button group, use the `ButtonGroup` component. See the [Button Group
 
 ### Link
 
-You can use the `render` prop on `<Button />` to make another component look like a button. Here's an example of a link that looks like a button.
+You can use the `buttonVariants` helper to make a link look like a button.
 
-Remember to set the `nativeButton` prop to `false` if you're returning an element that is not a button.
+**Do not use `<Button render={<a />} nativeButton={false} />` for links.** The Base UI `Button` component always applies `role="button"`, which overrides the semantic link role on `<a>` elements. Use `buttonVariants` with a plain `<a>` tag instead.
 
 <ComponentPreview styleName="base-nova" name="button-render" />
 
diff --git a/apps/v4/content/docs/components/base/calendar.mdx b/apps/v4/content/docs/components/base/calendar.mdx
index 4a61857fff..02fac9f59a 100644
--- a/apps/v4/content/docs/components/base/calendar.mdx
+++ b/apps/v4/content/docs/components/base/calendar.mdx
@@ -13,12 +13,6 @@ links:
   previewClassName="h-96"
 />
 
-## Blocks
-
-We have built a collection of 30+ calendar blocks that you can use to build your own calendar components.
-
-See all calendar blocks in the [Blocks Library](/blocks/calendar) page.
-
 ## Installation
 
 <CodeTabs>
diff --git a/apps/v4/content/docs/components/base/sidebar.mdx b/apps/v4/content/docs/components/base/sidebar.mdx
index 31545a50f6..f89a3479cc 100644
--- a/apps/v4/content/docs/components/base/sidebar.mdx
+++ b/apps/v4/content/docs/components/base/sidebar.mdx
@@ -148,10 +148,12 @@ For multiple sidebars in your application, you can use the `--sidebar-width` and
 
 ```tsx showLineNumbers
 <SidebarProvider
-  style={{
-    "--sidebar-width": "20rem",
-    "--sidebar-width-mobile": "20rem",
-  }}
+  style={
+    {
+      "--sidebar-width": "20rem",
+      "--sidebar-width-mobile": "20rem",
+    } as React.CSSProperties
+  }
 >
   <Sidebar />
 </SidebarProvider>
diff --git a/apps/v4/content/docs/components/radix/calendar.mdx b/apps/v4/content/docs/components/radix/calendar.mdx
index b208100489..df983f40e2 100644
--- a/apps/v4/content/docs/components/radix/calendar.mdx
+++ b/apps/v4/content/docs/components/radix/calendar.mdx
@@ -13,12 +13,6 @@ links:
   previewClassName="h-96"
 />
 
-## Blocks
-
-We have built a collection of 30+ calendar blocks that you can use to build your own calendar components.
-
-See all calendar blocks in the [Blocks Library](/blocks/calendar) page.
-
 ## Installation
 
 <CodeTabs>
diff --git a/apps/v4/content/docs/components/radix/sidebar.mdx b/apps/v4/content/docs/components/radix/sidebar.mdx
index 14cd915945..9f5eef773f 100644
--- a/apps/v4/content/docs/components/radix/sidebar.mdx
+++ b/apps/v4/content/docs/components/radix/sidebar.mdx
@@ -148,10 +148,12 @@ For multiple sidebars in your application, you can use the `--sidebar-width` and
 
 ```tsx showLineNumbers
 <SidebarProvider
-  style={{
-    "--sidebar-width": "20rem",
-    "--sidebar-width-mobile": "20rem",
-  }}
+  style={
+    {
+      "--sidebar-width": "20rem",
+      "--sidebar-width-mobile": "20rem",
+    } as React.CSSProperties
+  }
 >
   <Sidebar />
 </SidebarProvider>
diff --git a/apps/v4/content/docs/installation/manual.mdx b/apps/v4/content/docs/installation/manual.mdx
index 0c1c3c6bdf..8433f94c29 100644
--- a/apps/v4/content/docs/installation/manual.mdx
+++ b/apps/v4/content/docs/installation/manual.mdx
@@ -45,80 +45,10 @@ Add the following to your styles/globals.css file. You can learn more about usin
 ```css showLineNumbers title="src/styles/globals.css"
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
 @custom-variant dark (&:is(.dark *));
 
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -158,6 +88,75 @@ Add the following to your styles/globals.css file. You can learn more about usin
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -188,7 +187,7 @@ Create a `components.json` file in the root of your project.
 ```json title="components.json" showLineNumbers
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "radix-nova",
   "rsc": false,
   "tsx": true,
   "tailwind": {
diff --git a/apps/v4/examples/base/button-render.tsx b/apps/v4/examples/base/button-render.tsx
index 7231fe00a3..704362487d 100644
--- a/apps/v4/examples/base/button-render.tsx
+++ b/apps/v4/examples/base/button-render.tsx
@@ -1,9 +1,14 @@
-import { Button } from "@/examples/base/ui/button"
+"use client"
+
+import { buttonVariants } from "@/examples/base/ui/button"
 
 export default function ButtonRender() {
   return (
-    <Button nativeButton={false} render={<a href="#" />}>
+    <a
+      href="#"
+      className={buttonVariants({ variant: "secondary", size: "sm" })}
+    >
       Login
-    </Button>
+    </a>
   )
 }
diff --git a/apps/v4/examples/base/ui-rtl/badge.tsx b/apps/v4/examples/base/ui-rtl/badge.tsx
index d74f1f1903..54d962cfed 100644
--- a/apps/v4/examples/base/ui-rtl/badge.tsx
+++ b/apps/v4/examples/base/ui-rtl/badge.tsx
@@ -36,7 +36,7 @@ function Badge({
     defaultTagName: "span",
     props: mergeProps<"span">(
       {
-        className: cn(badgeVariants({ className, variant })),
+        className: cn(badgeVariants({ variant }), className),
       },
       props
     ),
diff --git a/apps/v4/examples/base/ui/badge.tsx b/apps/v4/examples/base/ui/badge.tsx
index 358d5353cc..e32f20c116 100644
--- a/apps/v4/examples/base/ui/badge.tsx
+++ b/apps/v4/examples/base/ui/badge.tsx
@@ -36,7 +36,7 @@ function Badge({
     defaultTagName: "span",
     props: mergeProps<"span">(
       {
-        className: cn(badgeVariants({ className, variant })),
+        className: cn(badgeVariants({ variant }), className),
       },
       props
     ),
diff --git a/apps/v4/public/r/styles/base-lyra/badge.json b/apps/v4/public/r/styles/base-lyra/badge.json
index bacdb1bf7e..3eab4c6a00 100644
--- a/apps/v4/public/r/styles/base-lyra/badge.json
+++ b/apps/v4/public/r/styles/base-lyra/badge.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ className, variant })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/button-example.json b/apps/v4/public/r/styles/base-lyra/button-example.json
index 8a235962c6..49f39dbe81 100644
--- a/apps/v4/public/r/styles/base-lyra/button-example.json
+++ b/apps/v4/public/r/styles/base-lyra/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button, buttonVariants } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <a href=\"#\" className={buttonVariants()}>\n          Link\n        </a>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/badge.json b/apps/v4/public/r/styles/base-maia/badge.json
index d65b9551b8..0c5840d224 100644
--- a/apps/v4/public/r/styles/base-maia/badge.json
+++ b/apps/v4/public/r/styles/base-maia/badge.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30\",\n        ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ className, variant })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30\",\n        ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/button-example.json b/apps/v4/public/r/styles/base-maia/button-example.json
index d870dd8e92..f8c09f279e 100644
--- a/apps/v4/public/r/styles/base-maia/button-example.json
+++ b/apps/v4/public/r/styles/base-maia/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button, buttonVariants } from \"@/registry/base-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <a href=\"#\" className={buttonVariants()}>\n          Link\n        </a>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/badge.json b/apps/v4/public/r/styles/base-mira/badge.json
index d4a199d6ee..7aeae23eca 100644
--- a/apps/v4/public/r/styles/base-mira/badge.json
+++ b/apps/v4/public/r/styles/base-mira/badge.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30\",\n        ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ className, variant })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30\",\n        ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/button-example.json b/apps/v4/public/r/styles/base-mira/button-example.json
index 8fdc164fb5..cfed0f1f09 100644
--- a/apps/v4/public/r/styles/base-mira/button-example.json
+++ b/apps/v4/public/r/styles/base-mira/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button, buttonVariants } from \"@/registry/base-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <a href=\"#\" className={buttonVariants()}>\n          Link\n        </a>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/badge.json b/apps/v4/public/r/styles/base-nova/badge.json
index 8dc95a90b3..fbf2c39a8f 100644
--- a/apps/v4/public/r/styles/base-nova/badge.json
+++ b/apps/v4/public/r/styles/base-nova/badge.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ className, variant })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/button-example.json b/apps/v4/public/r/styles/base-nova/button-example.json
index aa7d5dc57f..2d5f9ceb76 100644
--- a/apps/v4/public/r/styles/base-nova/button-example.json
+++ b/apps/v4/public/r/styles/base-nova/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button, buttonVariants } from \"@/registry/base-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <a href=\"#\" className={buttonVariants()}>\n          Link\n        </a>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/badge.json b/apps/v4/public/r/styles/base-vega/badge.json
index 4b2f27fcf9..29eb1a9297 100644
--- a/apps/v4/public/r/styles/base-vega/badge.json
+++ b/apps/v4/public/r/styles/base-vega/badge.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ className, variant })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary: \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive: \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline: \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost: \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/button-example.json b/apps/v4/public/r/styles/base-vega/button-example.json
index a97aa5a1a4..407a23c65c 100644
--- a/apps/v4/public/r/styles/base-vega/button-example.json
+++ b/apps/v4/public/r/styles/base-vega/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button, buttonVariants } from \"@/registry/base-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            remixicon=\"RiArrowLeftCircleLine\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <a href=\"#\" className={buttonVariants()}>\n          Link\n        </a>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/registry/bases/base/examples/button-example.tsx b/apps/v4/registry/bases/base/examples/button-example.tsx
index ce5052406d..61424d7903 100644
--- a/apps/v4/registry/bases/base/examples/button-example.tsx
+++ b/apps/v4/registry/bases/base/examples/button-example.tsx
@@ -1,8 +1,10 @@
+"use client"
+
 import {
   Example,
   ExampleWrapper,
 } from "@/registry/bases/base/components/example"
-import { Button } from "@/registry/bases/base/ui/button"
+import { Button, buttonVariants } from "@/registry/bases/base/ui/button"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 export default function ButtonExample() {
@@ -906,9 +908,9 @@ function ButtonExamples() {
             />
           </Button>
         </div>
-        <Button render={<a href="#" />} nativeButton={false}>
+        <a href="#" className={buttonVariants()}>
           Link
-        </Button>
+        </a>
       </div>
     </Example>
   )
diff --git a/apps/v4/registry/bases/base/ui/badge.tsx b/apps/v4/registry/bases/base/ui/badge.tsx
index d0a3f3e0a0..9fee4b486d 100644
--- a/apps/v4/registry/bases/base/ui/badge.tsx
+++ b/apps/v4/registry/bases/base/ui/badge.tsx
@@ -33,7 +33,7 @@ function Badge({
     defaultTagName: "span",
     props: mergeProps<"span">(
       {
-        className: cn(badgeVariants({ className, variant })),
+        className: cn(badgeVariants({ variant }), className),
       },
       props
     ),