+
+
+
BDS Button Component
+ Brand Design System
+
+
+ A scalable button component following the XRPL Brand Design System. This showcase demonstrates all states,
+ responsive behavior, and accessibility features of the Primary button variant.
+
+
+
+ {/* Basic Usage */}
+
+
+
Basic Usage
+ Primary Variant
+
+
+
+ Get Started
+
+
+ Submit Form
+
+
+ Continue
+
+
+ {clickCount > 0 && (
+ Button clicked {clickCount} time{clickCount !== 1 ? 's' : ''}
+ )}
+
+
+ {/* States */}
+
+
+
Button States
+ Interactive States
+
+
+
+
+
+
Enabled State
+
Default state when button is ready for interaction.
+
+ Enabled Button
+
+
+
+
+
Disabled State
+
Button cannot be interacted with.
+
+ Disabled Button
+
+
+
+
+
+
Hover & Focus States
+
+ Hover over the buttons below or use Tab to focus them. Notice the background color change and icon swap.
+
+
+
+ Hover Me
+
+
+ Focus Me (Tab)
+
+
+
+
+ {/* Black Color Variant */}
+
+
+
Black Color Variant
+ Color Theme
+
+
+ Primary buttons can use a black color theme for dark backgrounds or alternative styling needs.
+
+
+
+ Black Primary
+
+
+ Dark Button
+
+
+ Get Started
+
+
+
+
+ {/* Black Variant States */}
+
+
+
Black Variant States
+ Interactive States
+
+
+
+
+
+
Enabled State
+
Black background with white text.
+
+ 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 background darkens slightly 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 Primary
+
+
+ Black Primary
+
+
+
+
+ {/* Without Icon */}
+
+
+
Without Icon
+ Icon Control
+
+ Buttons can be rendered without the arrow icon when needed.
+
+
+ No Icon Button
+
+
+ With Icon Button
+
+
+
+
+ {/* Button Types */}
+
+
+
Button Types
+ Form Integration
+
+ Different button types for form submission and actions.
+
+
+
+ {/* Responsive Behavior */}
+
+
+
Responsive Behavior
+ Breakpoint Adjustments
+
+
+ Button padding adjusts automatically across breakpoints. Resize your browser window to see the changes:
+
+
+
+ Desktop (≥1024px): Padding: 8px 19px 8px 20px, Gap: 16px
+
+
+ Tablet/Mobile (≤1023px): Padding: 8px 15px 8px 16px, Gap: 16px
+
+
+ Hover/Focus: Gap increases (22px desktop, 21px mobile) with adjusted padding to maintain
+ button width
+
+
+
+
+ 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 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: Black text (#141414) on Green 300 (#21E46B) = 9.06:1 (AAA)
+
+
+ Hover: Black text (#141414) on Green 200 (#70EE97) = 10.23:1 (AAA)
+
+
+ Disabled: Gray 500 (#838386) on Gray 200 (#E0E0E1) = 2.12:1 (acceptable for disabled
+ state)
+
+
+
+
+ {/* Code Examples */}
+
+
+
Code Examples
+ Implementation
+
+
+
+ {`import { Button } from 'shared/components/Button';
+
+// Basic usage (green theme - default)
+
+ Get Started
+
+
+// Black color theme
+
+ Dark Button
+
+
+// Disabled state
+
+ Submit
+
+
+// Without icon
+
+ Continue
+
+
+// Form integration
+
+ Submit Form
+ `}
+
+
+
+ {/* 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)
+ Icon Size: 15px × 14px
+ Icon Gap: 16px (default), 22px (hover/focus desktop), 21px (hover/focus mobile)
+ Min Height: 40px (touch target)
+
+
+
+
+
+
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
+
+
+
+
+
+
BDS Tertiary Button
+ Brand Design System
+
+
+ The Tertiary button is a text-only button style used for low-emphasis or contextual actions. It features no
+ background fill or border, appearing as a simple text link with optional arrow icon. This variant provides the
+ lowest visual emphasis while maintaining brand consistency through green text colors.
+
+
+
+ {/* Basic Usage */}
+
+
+
Basic Usage
+ Tertiary Variant
+
+
+
+ View Details
+
+
+ Learn More
+
+
+ Read More
+
+
+ {clickCount > 0 && (
+
+ Button clicked {clickCount} time{clickCount !== 1 ? 's' : ''}
+
+ )}
+
+
+ {/* Primary vs Secondary vs Tertiary Comparison */}
+
+
+
Primary vs Secondary vs Tertiary
+ Visual Hierarchy
+
+
+ Use Primary for main actions, Secondary for supporting actions, and Tertiary for low-emphasis or contextual
+ actions to create clear visual hierarchy.
+
+
+
+ Get Started
+
+
+ Learn More
+
+
+ View Details
+
+
+
+
+ {/* States */}
+
+
+
Button States
+ Interactive States
+
+
+
+
+
+
Enabled State
+
Text-only style with green text color, no background or border.
+
+ Enabled Button
+
+
+
+
+
Disabled State
+
Gray text indicates non-interactive state. Icon is hidden.
+
+ Disabled Button
+
+
+
+
+
+
Hover & Focus States
+
+ Hover over the buttons or use Tab to focus them. Notice the underline appears and text color darkens to
+ Green 500. The focus state adds a green outline around the text.
+
+
+
+ Hover Me
+
+
+ Focus Me (Tab)
+
+
+
+
+ {/* Black Color Variant */}
+
+
+
Black Color Variant
+ Color Theme
+
+
+ Tertiary buttons can use a black color theme with black text instead of green.
+
+
+
+ Black Tertiary
+
+
+ View Details
+
+
+ Learn More
+
+
+
+
+ {/* Black Variant States */}
+
+
+
Black Variant States
+ Interactive States
+
+
+
+
+
+
Enabled State
+
Black 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 underline appears on hover/focus.
+
+
+
+ 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 Tertiary
+
+
+ Black Tertiary
+
+
+
+
+ {/* Without Icon */}
+
+
+
Without Icon
+ Icon Control
+
+ Tertiary buttons can also be rendered without the arrow icon.
+
+
+ No Icon Button
+
+
+ With Icon Button
+
+
+
+
+ {/* Button Types */}
+
+
+
Button Types
+ Form Integration
+
+ Tertiary 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: 8px 20px, Gap: 16px
+
+
+ Tablet/Mobile (≤1023px): Padding: 8px 16px, Gap: 16px
+
+
+ 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 green outline (Green 500)
+ 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/Focus: Green 500 (#078139) on White = 5.12: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 tertiary button (green theme - default)
+
+ View Details
+
+
+// Black color theme
+
+ View Details
+
+
+// Disabled state
+
+ Unavailable
+
+
+// Without icon
+
+ Cancel
+
+
+// Primary + Secondary + Tertiary pairing
+
+ Submit
+
+
+ Learn More
+
+
+ Cancel
+ `}
+
+
+
+ {/* Design Specifications */}
+
+
+
Design Specifications
+ Visual Details
+
+
+
+
+ Typography
+
+ Font: Booton, sans-serif
+ Size: 18px (Body R token - different from Primary/Secondary)
+ Weight: 400
+ Line Height: 26.1px
+ Letter Spacing: -0.5px
+
+
+
+ Spacing & Layout
+
+ Border Radius: 100px (fully rounded - inherited but not visually apparent)
+ Border: None
+ Background: Transparent
+ 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
+
Text Decoration
+
+ {/* Rows */}
+
+
Enabled
+
#0DAA3E (Green 400)
+
Transparent
+
None
+
+
+
Hover
+
#078139 (Green 500)
+
Transparent
+
Underline
+
+
+
Focus
+
#078139 (Green 500)
+
Transparent
+
Underline + 2px Green 500 outline
+
+
+
Active
+
#0DAA3E (Green 400)
+
Transparent
+
Underline
+
+
+
Disabled
+
#A2A2A4 (Gray 400)
+
Transparent
+
None
+
+
+
+
State Colors - Black Theme
+
+ {/* Header */}
+
+
State
+
Text Color
+
Background
+
Text Decoration
+
+ {/* Rows */}
+
+
Enabled
+
#141414 (Neutral Black)
+
Transparent
+
None
+
+
+
Hover
+
#141414 (Neutral Black)
+
Transparent
+
Underline
+
+
+
Focus
+
#141414 (Neutral Black)
+
Transparent
+
Underline + 2px Black outline
+
+
+
Active
+
#141414 (Neutral Black)
+
Transparent
+
Underline
+
+
+
Disabled
+
#A2A2A4 (Gray 400)
+
Transparent
+
None
+
+
+
+
+ {/* Key Differences from Primary/Secondary */}
+
+
+
Key Differences from Primary/Secondary
+ Comparison
+
+
+ {/* Header */}
+
+
Aspect
+
Primary
+
Secondary
+
Tertiary
+
+ {/* Rows */}
+
+
Background (Enabled)
+
Green 300 (#21E46B)
+
Transparent
+
Transparent
+
+
+
Background (Hover)
+
Green 200 (#70EE97)
+
Green 100 (#EAFCF1)
+
Transparent
+
+
+
Border (Enabled)
+
None
+
2px Green 400
+
None
+
+
+
Text Color (Enabled)
+
Black (#141414)
+
Green 400 (#0DAA3E)
+
Green 400 (#0DAA3E)
+
+
+
Text Decoration
+
None
+
None
+
Underline (hover/focus/active)
+
+
+
Typography Token
+
Label R (16px)
+
Label R (16px)
+
Body R (18px)
+
+
+
Focus Indicator
+
2px Black border
+
2px Black outline
+
2px Green 500 outline
+
+
+
Disabled Background
+
Gray 200 (#E0E0E1)
+
Transparent
+
Transparent
+
+
+
Arrow Icon
+
✅ Shared
+
✅ Shared
+
✅ Shared
+
+
+