feat: improve button styling

packages/react/components/Button.tsx

@@ -2,26 +2,35 @@ import React from "react";
 import { vcn, VariantProps } from "../shared";
 
 const [buttonVariants, resolveVariants] = vcn({
-  base: "flex flex-row items-center justify-between rounded-md",
+  base: "flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 focus-visible:outline-black/50 dark:focus-visible:outline-white/50 transition-all",
   variants: {
-    variant: {
-      default:
-        "bg-white border border-gray-300 dark:bg-black dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors",
-      ghost:
-        "bg-black/0 hover:bg-black/10 dark:bg-white/0 dark:hover:bg-white/20 transition-colors",
-      outline:
-        "bg-transparent border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors",
-      link: "bg-transparent hover:underline transition-colors",
-    },
     size: {
       sm: "px-2 py-1 text-sm",
       md: "px-4 py-2 text-base",
       lg: "px-5 py-3 text-lg",
     },
+    border: {
+      none: "outline-none",
+      solid: "border border-black/20 dark:border-white/20",
+      outline: "outline outline-1 outline-black/20 dark:outline-white/20",
+    },
+    background: {
+      default:
+        "bg-white dark:bg-black hover:bg-gray-100 dark:hover:bg-gray-800",
+      ghost:
+        "bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20",
+      link: "bg-transparent hover:bg-transparent",
+    },
+    decoration: {
+      none: "no-underline",
+      link: "underline decoration-1 underline-offset-2 hover:underline-offset-4 decoration-black/100 dark:decoration-white/100",
+    },
   },
   defaults: {
-    variant: "default",
     size: "md",
+    border: "solid",
+    background: "default",
+    decoration: "none",
   },
 });
 

packages/react/stories/Button.stories.ts

@@ -2,14 +2,17 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Button } from "../components/Button";
 
 const meta: Meta<typeof Button> = {
+  title: "React/Button",
   component: Button,
   tags: ["autodocs"],
   argTypes: {
-    variant: {
-      options: ["default", "ghost", "outline", "link"],
+    size: { options: ["sm", "md", "lg"], control: "select" },
+    border: { options: ["none", "solid", "outline"], control: "select" },
+    background: {
+      options: ["default", "ghost", "link"],
       control: "select",
     },
-    size: { options: ["sm", "md", "lg"], control: "select" },
+    decoration: { options: ["none", "link"], control: "select" },
     onClick: { table: { disable: true } },
   },
   args: { children: "Button", onClick: () => console.log("clicked") },
@@ -20,28 +23,36 @@ type Story = StoryObj<typeof Button>;
 
 export const Default: Story = {
   args: {
-    variant: "default",
+    border: "solid",
+    background: "default",
+    decoration: "none",
     size: "md",
   },
 };
 
 export const Ghost: Story = {
   args: {
-    variant: "ghost",
+    border: "none",
+    background: "ghost",
+    decoration: "none",
     size: "md",
   },
 };
 
 export const Outline: Story = {
   args: {
-    variant: "outline",
+    border: "outline",
+    background: "ghost",
+    decoration: "none",
     size: "md",
   },
 };
 
 export const Link: Story = {
   args: {
-    variant: "link",
+    border: "none",
+    background: "link",
+    decoration: "link",
     size: "md",
   },
 };