From f5ec696e158b10691f145a7b57c159ff3b1f981b Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Mon, 5 May 2025 10:31:14 +0100
Subject: [PATCH] fix: button fixes v3 (#20557)

* fix button styling

* add button usage

---------

Co-authored-by: Eunjae Lee <hey@eunjae.dev>
---
 .../content/design/components/button.mdx      | 31 +++++++++++++++++++
 packages/ui/components/button/Button.tsx      |  5 +--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/apps/ui-playground/content/design/components/button.mdx b/apps/ui-playground/content/design/components/button.mdx
index b4c8cb5d3b..711b322588 100644
--- a/apps/ui-playground/content/design/components/button.mdx
+++ b/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>
+```
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index f0ea6213b6..6adaefda4a 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/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",