fix: button fixes v3 (#20557)

* fix button styling

* add button usage

---------

Co-authored-by: Eunjae Lee <hey@eunjae.dev>

apps/ui-playground/content/design/components/button.mdx

@@ -65,3 +65,34 @@ Buttons can be grouped together using the ButtonGroup component. The ButtonGroup
 #### Combined
 
 <ButtonGroupSizesCombined/>
+
+## Usage
+
+```tsx
+// Primary button (default)
+<Button>Primary Button</Button>
+
+// Secondary button
+<Button color="secondary">Secondary Button</Button>
+
+// Minimal button
+<Button color="minimal">Minimal Button</Button>
+
+// Destructive button
+<Button color="destructive">Destructive Button</Button>
+
+// With start icon
+<Button StartIcon="plus">Add Item</Button>
+
+// With end icon
+<Button EndIcon="chevronRight">View More</Button>
+
+// With link
+<Button href="/some-path">Navigate</Button>
+
+// Different sizes
+<Button size="xs">Extra Small</Button>
+<Button size="sm">Small</Button>
+<Button size="base">Base (Default)</Button>
+<Button size="lg">Large</Button>
+```

packages/ui/components/button/Button.tsx

@@ -53,6 +53,8 @@ export const buttonClasses = cva(
           // Base colors
           "bg-brand-default",
           "text-brand",
+          // Hover state
+          "enabled:hover:bg-brand-emphasis",
           // Focus state
           "focus-visible:outline-none",
           "focus-visible:ring-0",
@@ -78,7 +80,6 @@ export const buttonClasses = cva(
           "border-default",
           // Hover state
           "enabled:hover:bg-muted",
-          "enabled:hover:border-emphasis",
           "enabled:hover:text-emphasis",
           // Disabled
           "disabled:opacity-30",
@@ -125,7 +126,7 @@ export const buttonClasses = cva(
           "text-error",
           // Hover state
           "dark:hover:text-red-100",
-          "hover:border-semantic-danager-subtle",
+          "hover:border-semantic-error",
           "hover:bg-error",
           // Focus state
           "focus-visible:text-red-700",