mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-06-08 03:06:50 +00:00
69 lines
2.0 KiB
Markdown
69 lines
2.0 KiB
Markdown
# ButtonGroup Component
|
|
|
|
A responsive button group container that displays primary and/or tertiary buttons. Stacks vertically on mobile and horizontally on tablet+.
|
|
|
|
## Features
|
|
|
|
- **Responsive Layout**: Vertical stack on mobile, horizontal row on tablet+
|
|
- **Flexible Configuration**: Support for primary, tertiary, or both buttons
|
|
- **Customizable Spacing**: Control gap between buttons on tablet+ (none or small)
|
|
- **Theme Support**: Green or black color themes
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { ButtonGroup } from 'shared/patterns/ButtonGroup';
|
|
|
|
// Basic usage with both buttons
|
|
<ButtonGroup
|
|
primaryButton={{ label: "Get Started", href: "/start" }}
|
|
tertiaryButton={{ label: "Learn More", href: "/learn" }}
|
|
color="green"
|
|
/>
|
|
|
|
// With no gap on tablet+
|
|
<ButtonGroup
|
|
primaryButton={{ label: "Action", onClick: handleClick }}
|
|
color="black"
|
|
gap="none"
|
|
/>
|
|
|
|
// With small gap on tablet+ (4px - default)
|
|
<ButtonGroup
|
|
primaryButton={{ label: "Primary Action", href: "/action" }}
|
|
tertiaryButton={{ label: "Secondary", href: "/secondary" }}
|
|
gap="small"
|
|
/>
|
|
```
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `primaryButton` | `ButtonConfig` | - | Primary button configuration |
|
|
| `tertiaryButton` | `ButtonConfig` | - | Tertiary button configuration |
|
|
| `color` | `'green' \| 'black'` | `'green'` | Button color theme |
|
|
| `gap` | `'none' \| 'small'` | `'small'` | Gap between buttons on tablet+ (0px or 4px) |
|
|
| `className` | `string` | `''` | Additional CSS classes |
|
|
|
|
### ButtonConfig
|
|
|
|
```tsx
|
|
interface ButtonConfig {
|
|
label: string;
|
|
href?: string;
|
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
}
|
|
```
|
|
|
|
## Responsive Behavior
|
|
|
|
- **Mobile (<768px)**: Buttons stack vertically with 8px gap, aligned to start
|
|
- **Tablet+ (≥768px)**: Buttons align horizontally, centered, with configurable gap (0px or 4px)
|
|
|
|
## CSS Classes
|
|
|
|
- `.bds-button-group` - Base component
|
|
- `.bds-button-group--gap-none` - No gap on tablet+ (0px)
|
|
- `.bds-button-group--gap-small` - Small gap on tablet+ (4px)
|