@@ -252,11 +307,16 @@ export default function ButtonShowcase() {
{`import { Button } from 'shared/components/Button';
-// Basic usage
+// Basic usage (green theme - default)
Get Started
+// Black color theme
+
+ Dark Button
+
+
// Disabled state
Submit
@@ -305,49 +365,90 @@ export default function ButtonShowcase() {
-
State Colors
-
-
-
- State
- Text Color
- Background Color
- Border
-
-
-
-
- Enabled
- #141414 (Neutral Black)
- #21E46B (Green 300)
- None
-
-
- Hover
- #141414 (Neutral Black)
- #70EE97 (Green 200)
- None
-
-
- Focus
- #141414 (Neutral Black)
- #70EE97 (Green 200)
- 2px solid #141414
-
-
- Active
- #141414 (Neutral Black)
- #21E46B (Green 300)
- None
-
-
- Disabled
- #838386 (Gray 500)
- #E0E0E1 (Gray 200)
- None
-
-
-
+
State Colors - Green Theme
+
+ {/* Header */}
+
+
State
+
Text Color
+
Background Color
+
Border
+
+ {/* Rows */}
+
+
Enabled
+
#141414 (Neutral Black)
+
#21E46B (Green 300)
+
None
+
+
+
Hover
+
#141414 (Neutral Black)
+
#70EE97 (Green 200)
+
None
+
+
+
Focus
+
#141414 (Neutral Black)
+
#70EE97 (Green 200)
+
2px solid #141414
+
+
+
Active
+
#141414 (Neutral Black)
+
#21E46B (Green 300)
+
None
+
+
+
Disabled
+
#838386 (Gray 500)
+
#E0E0E1 (Gray 200)
+
None
+
+
+
+
State Colors - Black Theme
+
+ {/* Header */}
+
+
State
+
Text Color
+
Background Color
+
Border
+
+ {/* Rows */}
+
+
Enabled
+
#FFFFFF (White)
+
#141414 (Neutral Black)
+
None
+
+
+
Hover
+
#FFFFFF (White)
+
rgba(20, 20, 20, 0.8) (80% Black)
+
None
+
+
+
Focus
+
#FFFFFF (White)
+
rgba(20, 20, 20, 0.8) (80% Black)
+
2px solid #141414
+
+
+
Active
+
#FFFFFF (White)
+
#141414 (Neutral Black)
+
None
+
+
+
Disabled
+
#838386 (Gray 500)
+
#E0E0E1 (Gray 200)
+
None
+
+
+
+
+
BDS Secondary Button
+ Brand Design System
+
+
+ The Secondary button is an outline-style button used for secondary actions. It features a transparent
+ background with a green stroke/border, providing visual hierarchy below the Primary button while maintaining
+ brand consistency.
+
+
+
+ {/* Basic Usage */}
+
+
+
Basic Usage
+ Secondary Variant
+
+
+
+ Learn More
+
+
+ View Details
+
+
+ Explore
+
+
+ {clickCount > 0 && (
+
+ Button clicked {clickCount} time{clickCount !== 1 ? 's' : ''}
+
+ )}
+
+
+ {/* Primary vs Secondary Comparison */}
+
+
+
Primary vs Secondary
+ Visual Hierarchy
+
+
+ Use Primary for main actions and Secondary for supporting actions to create clear visual hierarchy.
+
+
+
+ Get Started
+
+
+ Learn More
+
+
+
+
+ {/* States */}
+
+
+
Button States
+ Interactive States
+
+
+
+
+
+
Enabled State
+
Default outline style with green border and text.
+
+ Enabled Button
+
+
+
+
+
Disabled State
+
Gray border and text indicate non-interactive state.
+
+ Disabled Button
+
+
+
+
+
+
Hover & Focus States
+
+ Hover over the buttons or use Tab to focus them. Notice the light green background fill and darker green
+ border on hover/focus.
+
+
+
+ Hover Me
+
+
+ Focus Me (Tab)
+
+
+
+
+ {/* Black Color Variant */}
+
+
+
Black Color Variant
+ Color Theme
+
+
+ Secondary buttons can use a black color theme with black text and border instead of green.
+
+
+
+ Black Secondary
+
+
+ Learn More
+
+
+ View Details
+
+
+
+
+ {/* Black Variant States */}
+
+
+
Black Variant States
+ Interactive States
+
+
+
+
+
+
Enabled State
+
Black border and text with transparent background.
+
+ Enabled Button
+
+
+
+
+
Disabled State
+
Same disabled styling as green variant.
+
+ Disabled Button
+
+
+
+
+
+
Hover & Focus States
+
+ Hover over the buttons or use Tab to focus them. Notice the subtle black background fill on hover.
+
+
+
+ Hover Me
+
+
+ Focus Me (Tab)
+
+
+
+
+ {/* Green vs Black Comparison */}
+
+
+
Green vs Black Comparison
+ Color Themes
+
+ Compare the green (default) and black color themes side by side.
+
+
+ Green Secondary
+
+
+ Black Secondary
+
+
+
+
+ {/* Without Icon */}
+
+
+
Without Icon
+ Icon Control
+
+ Secondary buttons can also be rendered without the arrow icon.
+
+
+ No Icon Button
+
+
+ With Icon Button
+
+
+
+
+ {/* Button Types */}
+
+
+
Button Types
+ Form Integration
+
+ Secondary buttons can be used for form actions like cancel or reset.
+
+
+
+ {/* Responsive Behavior */}
+
+
+
Responsive Behavior
+ Breakpoint Adjustments
+
+
+ Button padding adjusts automatically across breakpoints. Resize your browser window to see the changes:
+
+
+
+ Desktop (≥1024px): Padding: 6px 17px 6px 18px (compensates for 2px border)
+
+
+ Tablet/Mobile (≤1023px): Padding: 6px 13px 6px 14px
+
+
+ Hover/Focus: Gap increases (22px desktop, 21px mobile) with adjusted padding
+
+
+
+
+ Responsive Button
+
+
+ Long Button Label Example
+
+
+
+
+ {/* Accessibility */}
+
+
+
Accessibility Features
+ WCAG Compliance
+
+
+
+
+ Keyboard Navigation
+
+ Tab to focus buttons
+ Enter or Space to activate
+ Focus indicator: 2px black outline (additional to green border)
+ Disabled buttons are not focusable
+
+
+
+ Screen Reader Support
+
+ Button labels are announced
+ Disabled state communicated via aria-disabled
+ Icons are hidden from screen readers (aria-hidden)
+ Semantic button element used
+
+
+
+
+
+
Color Contrast
+
+
+ Enabled: Green 400 (#0DAA3E) on White = 4.52:1 (AA for large text)
+
+
+ Hover: Green 500 (#078139) on Green 100 (#EAFCF1) = 4.87:1 (AA)
+
+
+ Disabled: Gray 400 (#A2A2A4) on White = reduced contrast (acceptable for disabled state)
+
+
+
+
+ {/* Code Examples */}
+
+
+
Code Examples
+ Implementation
+
+
+
+ {`import { Button } from 'shared/components/Button';
+
+// Basic secondary button (green theme - default)
+
+ Learn More
+
+
+// Black color theme
+
+ Learn More
+
+
+// Disabled state
+
+ Unavailable
+
+
+// Without icon
+
+ Cancel
+
+
+// Primary + Secondary pairing
+
+ Submit
+
+
+ Cancel
+ `}
+
+
+
+ {/* Design Specifications */}
+
+
+
Design Specifications
+ Visual Details
+
+
+
+
+ Typography
+
+ Font: Booton, sans-serif
+ Size: 16px
+ Weight: 400
+ Line Height: 23.2px
+ Letter Spacing: 0px
+
+
+
+ Spacing & Layout
+
+ Border Radius: 100px (fully rounded)
+ Border Width: 2px solid
+ Icon Size: 15px × 14px
+ Icon Gap: 16px (default), 22px (hover/focus desktop), 21px (hover/focus mobile)
+ Max Height: 40px
+
+
+
+
+
+
State Colors - Green Theme
+
+ {/* Header */}
+
+
State
+
Text Color
+
Background
+
Border
+
+ {/* Rows */}
+
+
Enabled
+
#0DAA3E (Green 400)
+
Transparent
+
2px #0DAA3E (Green 400)
+
+
+
Hover
+
#078139 (Green 500)
+
#EAFCF1 (Green 100)
+
2px #078139 (Green 500)
+
+
+
Focus
+
#078139 (Green 500)
+
#EAFCF1 (Green 100)
+
2px #078139 + 2px #141414 outline
+
+
+
Active
+
#0DAA3E (Green 400)
+
Transparent
+
2px #0DAA3E (Green 400)
+
+
+
Disabled
+
#A2A2A4 (Gray 400)
+
Transparent
+
2px #A2A2A4 (Gray 400)
+
+
+
+
State Colors - Black Theme
+
+ {/* Header */}
+
+
State
+
Text Color
+
Background
+
Border
+
+ {/* Rows */}
+
+
Enabled
+
#141414 (Neutral Black)
+
Transparent
+
2px #141414 (Neutral Black)
+
+
+
Hover
+
#141414 (Neutral Black)
+
rgba(20, 20, 20, 0.15) (15% Black)
+
2px #141414 (Neutral Black)
+
+
+
Focus
+
#141414 (Neutral Black)
+
rgba(20, 20, 20, 0.15) (15% Black)
+
2px #141414 + 2px #141414 outline
+
+
+
Active
+
#141414 (Neutral Black)
+
Transparent
+
2px #141414 (Neutral Black)
+
+
+
Disabled
+
#A2A2A4 (Gray 400)
+
Transparent
+
2px #A2A2A4 (Gray 400)
+
+
+
+
+ {/* Key Differences from Primary */}
+
+
+
Key Differences from Primary
+ Comparison
+
+
+ {/* Header */}
+
+
Aspect
+
Primary
+
Secondary
+
+ {/* Rows */}
+
+
Background (Enabled)
+
Green 300 (#21E46B)
+
Transparent
+
+
+
Background (Hover)
+
Green 200 (#70EE97)
+
Green 100 (#EAFCF1)
+
+
+
Border (Enabled)
+
None
+
2px Green 400
+
+
+
Text Color (Enabled)
+
Black (#141414)
+
Green 400 (#0DAA3E)
+
+
+
Disabled Background
+
Gray 200 (#E0E0E1)
+
Transparent
+
+
+
Arrow Icon
+
✅ Shared
+
✅ Shared
+
+
+