0
# Button Components
1

2
Button components and button groups with multiple variants and states.
3

4
## Capabilities
5

6
### Button
7

8
Primary button component with multiple variants and states.
9

10
```typescript { .api }
11
/**
12
 * Button component for user interactions
13
 * @param variant - Button style variant
14
 * @param size - Button size
15
 * @param active - Active state
16
 * @param disabled - Disabled state
17
 */
18
function Button(props: ButtonProps): JSX.Element;
19

20
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
21
  /** Button style variant */
22
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
23
  /** Button size */
24
  size?: "sm" | "lg";
25
  /** Active state */
26
  active?: boolean;
27
  /** Disabled state */
28
  disabled?: boolean;
29
  /** Link URL (when used as link) */
30
  href?: string;
31
  /** Component used for the root node */
32
  as?: React.ElementType;
33
  /** Bootstrap CSS class prefix */
34
  bsPrefix?: string;
35
}
36
```
37

38
**Button Usage Examples:**
39

40
```typescript
41
import { Button } from "react-bootstrap";
42

43
// Basic buttons with variants
44
<Button variant="primary">Primary</Button>
45
<Button variant="secondary">Secondary</Button>
46
<Button variant="success">Success</Button>
47
<Button variant="danger">Danger</Button>
48
<Button variant="warning">Warning</Button>
49
<Button variant="info">Info</Button>
50
<Button variant="light">Light</Button>
51
<Button variant="dark">Dark</Button>
52
<Button variant="link">Link</Button>
53

54
// Outline buttons
55
<Button variant="outline-primary">Outline Primary</Button>
56
<Button variant="outline-secondary">Outline Secondary</Button>
57

58
// Button sizes
59
<Button size="lg" variant="primary">Large</Button>
60
<Button variant="primary">Regular</Button>
61
<Button size="sm" variant="primary">Small</Button>
62

63
// Button states
64
<Button variant="primary" active>Active</Button>
65
<Button variant="primary" disabled>Disabled</Button>
66

67
// Button as link
68
<Button variant="primary" href="#link">Link Button</Button>
69

70
// Button with click handler
71
<Button 
72
  variant="success"
73
  onClick={() => console.log('Button clicked!')}
74
>
75
  Click Me
76
</Button>
77
```
78

79
### ButtonGroup
80

81
Group related buttons together.
82

83
```typescript { .api }
84
/**
85
 * ButtonGroup component for grouping buttons
86
 * @param size - Button group size
87
 * @param vertical - Vertical layout
88
 */
89
function ButtonGroup(props: ButtonGroupProps): JSX.Element;
90

91
interface ButtonGroupProps extends React.HTMLAttributes<HTMLElement> {
92
  /** Button group size */
93
  size?: "sm" | "lg";
94
  /** Vertical layout */
95
  vertical?: boolean;
96
  /** ARIA role */
97
  role?: string;
98
  /** Component used for the root node */
99
  as?: React.ElementType;
100
  /** Bootstrap CSS class prefix */
101
  bsPrefix?: string;
102
}
103
```
104

105
**ButtonGroup Usage Examples:**
106

107
```typescript
108
import { ButtonGroup, Button } from "react-bootstrap";
109

110
// Basic button group
111
<ButtonGroup aria-label="Basic example">
112
  <Button variant="secondary">Left</Button>
113
  <Button variant="secondary">Middle</Button>
114
  <Button variant="secondary">Right</Button>
115
</ButtonGroup>
116

117
// Button group with different variants
118
<ButtonGroup>
119
  <Button variant="outline-primary">First</Button>
120
  <Button variant="outline-primary">Second</Button>
121
  <Button variant="outline-primary">Third</Button>
122
</ButtonGroup>
123

124
// Vertical button group
125
<ButtonGroup vertical>
126
  <Button variant="secondary">Button</Button>
127
  <Button variant="secondary">Button</Button>
128
  <Button variant="secondary">Button</Button>
129
</ButtonGroup>
130

131
// Large button group
132
<ButtonGroup size="lg">
133
  <Button variant="secondary">Large</Button>
134
  <Button variant="secondary">Button</Button>
135
</ButtonGroup>
136
```
137

138
### ButtonToolbar
139

140
Combine sets of button groups for more complex components.
141

142
```typescript { .api }
143
/**
144
 * ButtonToolbar component for combining button groups
145
 */
146
function ButtonToolbar(props: ButtonToolbarProps): JSX.Element;
147

148
interface ButtonToolbarProps extends React.HTMLAttributes<HTMLElement> {
149
  /** ARIA role */
150
  role?: string;
151
  /** Component used for the root node */
152
  as?: React.ElementType;
153
  /** Bootstrap CSS class prefix */
154
  bsPrefix?: string;
155
}
156
```
157

158
**ButtonToolbar Usage Examples:**
159

160
```typescript
161
import { ButtonToolbar, ButtonGroup, Button } from "react-bootstrap";
162

163
<ButtonToolbar aria-label="Toolbar with button groups">
164
  <ButtonGroup className="me-2" aria-label="First group">
165
    <Button variant="secondary">1</Button>
166
    <Button variant="secondary">2</Button>
167
    <Button variant="secondary">3</Button>
168
    <Button variant="secondary">4</Button>
169
  </ButtonGroup>
170
  
171
  <ButtonGroup className="me-2" aria-label="Second group">
172
    <Button variant="secondary">5</Button>
173
    <Button variant="secondary">6</Button>
174
    <Button variant="secondary">7</Button>
175
  </ButtonGroup>
176
  
177
  <ButtonGroup aria-label="Third group">
178
    <Button variant="secondary">8</Button>
179
  </ButtonGroup>
180
</ButtonToolbar>
181
```
182

183
### SplitButton
184

185
Button with attached dropdown for additional actions.
186

187
```typescript { .api }
188
/**
189
 * SplitButton component for buttons with dropdown
190
 * @param id - Unique identifier
191
 * @param title - Button title
192
 * @param variant - Button variant
193
 * @param size - Button size
194
 * @param disabled - Disabled state
195
 */
196
function SplitButton(props: SplitButtonProps): JSX.Element;
197

198
interface SplitButtonProps extends React.HTMLAttributes<HTMLElement> {
199
  /** Unique identifier */
200
  id: string;
201
  /** Button title */
202
  title: React.ReactNode;
203
  /** Button variant */
204
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
205
  /** Button size */
206
  size?: "sm" | "lg";
207
  /** Disabled state */
208
  disabled?: boolean;
209
  /** Dropdown direction */
210
  drop?: "up" | "down" | "start" | "end";
211
  /** Component used for the root node */
212
  as?: React.ElementType;
213
  /** Bootstrap CSS class prefix */
214
  bsPrefix?: string;
215
}
216
```
217

218
**SplitButton Usage Examples:**
219

220
```typescript
221
import { SplitButton, Dropdown } from "react-bootstrap";
222

223
<SplitButton
224
  variant="secondary"
225
  title="Split Button"
226
  id="split-button-basic"
227
  onClick={() => console.log('Main button clicked')}
228
>
229
  <Dropdown.Item eventKey="1">Action</Dropdown.Item>
230
  <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
231
  <Dropdown.Item eventKey="3" active>
232
    Active Item
233
  </Dropdown.Item>
234
  <Dropdown.Divider />
235
  <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
236
</SplitButton>
237
```
238

239
### ToggleButton
240

241
Button that can be toggled between active and inactive states.
242

243
```typescript { .api }
244
/**
245
 * ToggleButton component for toggle functionality
246
 * @param id - Unique identifier
247
 * @param type - Input type
248
 * @param checked - Checked state
249
 * @param disabled - Disabled state
250
 * @param name - Input name
251
 * @param value - Input value
252
 */
253
function ToggleButton(props: ToggleButtonProps): JSX.Element;
254

255
interface ToggleButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
256
  /** Unique identifier */
257
  id: string;
258
  /** Input type */
259
  type?: "checkbox" | "radio";
260
  /** Checked state */
261
  checked?: boolean;
262
  /** Disabled state */
263
  disabled?: boolean;
264
  /** Input name */
265
  name?: string;
266
  /** Input value */
267
  value?: string | string[] | number;
268
  /** Button variant */
269
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
270
  /** Button size */
271
  size?: "sm" | "lg";
272
  /** Bootstrap CSS class prefix */
273
  bsPrefix?: string;
274
}
275
```
276

277
### ToggleButtonGroup
278

279
Group of toggle buttons with radio or checkbox behavior.
280

281
```typescript { .api }
282
/**
283
 * ToggleButtonGroup component for grouped toggle buttons
284
 * @param type - Group type
285
 * @param name - Group name
286
 * @param value - Selected value(s)
287
 * @param onChange - Change handler
288
 */
289
function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;
290

291
interface ToggleButtonGroupProps extends React.HTMLAttributes<HTMLElement> {
292
  /** Group type */
293
  type?: "checkbox" | "radio";
294
  /** Group name */
295
  name?: string;
296
  /** Selected value(s) */
297
  value?: string | string[];
298
  /** Change handler */
299
  onChange?: (value: string | string[], event: React.SyntheticEvent) => void;
300
  /** Size variant */
301
  size?: "sm" | "lg";
302
  /** Vertical layout */
303
  vertical?: boolean;
304
  /** Bootstrap CSS class prefix */
305
  bsPrefix?: string;
306
}
307

308
interface ToggleButtonCheckboxProps extends ToggleButtonGroupProps {
309
  type: "checkbox";
310
  value?: string[];
311
  onChange?: (value: string[], event: React.SyntheticEvent) => void;
312
}
313

314
interface ToggleButtonRadioProps extends ToggleButtonGroupProps {
315
  type: "radio";
316
  value?: string;
317
  onChange?: (value: string, event: React.SyntheticEvent) => void;
318
}
319
```
320

321
**ToggleButton Usage Examples:**
322

323
```typescript
324
import { ToggleButton, ToggleButtonGroup } from "react-bootstrap";
325

326
// Radio button group
327
const [radioValue, setRadioValue] = useState('1');
328

329
const radios = [
330
  { name: 'Active', value: '1' },
331
  { name: 'Radio', value: '2' },
332
  { name: 'Radio', value: '3' },
333
];
334

335
<ToggleButtonGroup type="radio" name="options" value={radioValue} onChange={setRadioValue}>
336
  {radios.map((radio, idx) => (
337
    <ToggleButton
338
      key={idx}
339
      id={`radio-${idx}`}
340
      type="radio"
341
      variant="outline-success"
342
      name="radio"
343
      value={radio.value}
344
      checked={radioValue === radio.value}
345
    >
346
      {radio.name}
347
    </ToggleButton>
348
  ))}
349
</ToggleButtonGroup>
350

351
// Checkbox button group
352
const [checkboxValue, setCheckboxValue] = useState([1, 3]);
353

354
const checkboxes = [
355
  { name: 'Checkbox 1', value: '1' },
356
  { name: 'Checkbox 2', value: '2' },
357
  { name: 'Checkbox 3', value: '3' },
358
];
359

360
<ToggleButtonGroup type="checkbox" value={checkboxValue} onChange={setCheckboxValue}>
361
  {checkboxes.map((checkbox, idx) => (
362
    <ToggleButton
363
      key={idx}
364
      id={`checkbox-${idx}`}
365
      type="checkbox"
366
      variant="outline-primary"
367
      name="checkbox"
368
      value={checkbox.value}
369
      checked={checkboxValue.includes(checkbox.value)}
370
    >
371
      {checkbox.name}
372
    </ToggleButton>
373
  ))}
374
</ToggleButtonGroup>
375
```
376

377
### SplitButton
378

379
Split button component combining a button with a dropdown toggle.
380

381
```typescript { .api }
382
/**
383
 * SplitButton component for split buttons with dropdown
384
 * @param id - Unique identifier  
385
 * @param title - Button text
386
 * @param variant - Button variant
387
 * @param size - Button size
388
 * @param disabled - Disabled state
389
 * @param href - Link URL
390
 * @param target - Link target
391
 * @param onClick - Button click handler
392
 * @param drop - Dropdown direction
393
 * @param as - Button element type
394
 * @param menuRole - Dropdown menu ARIA role
395
 * @param renderMenuOnMount - Render menu on mount
396
 * @param rootCloseEvent - Root close event type
397
 * @param onToggle - Dropdown toggle handler
398
 * @param show - Controlled dropdown show state
399
 */
400
function SplitButton(props: SplitButtonProps): JSX.Element;
401

402
interface SplitButtonProps extends React.HTMLAttributes<HTMLElement> {
403
  /** Unique identifier */
404
  id: string;
405
  /** Button text */
406
  title: React.ReactNode;
407
  /** Button variant */
408
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
409
  /** Button size */
410
  size?: "sm" | "lg";
411
  /** Disabled state */
412
  disabled?: boolean;
413
  /** Link URL */
414
  href?: string;
415
  /** Link target */
416
  target?: string;
417
  /** Button click handler */
418
  onClick?: (event: React.MouseEvent) => void;
419
  /** Dropdown direction */
420
  drop?: "up" | "up-centered" | "down" | "down-centered" | "start" | "end";
421
  /** Button element type */
422
  as?: React.ElementType;
423
  /** Dropdown menu ARIA role */
424
  menuRole?: string;
425
  /** Render menu on mount */
426
  renderMenuOnMount?: boolean;
427
  /** Root close event type */
428
  rootCloseEvent?: "click" | "mousedown";
429
  /** Dropdown toggle handler */
430
  onToggle?: (isOpen: boolean, event: React.SyntheticEvent, metadata: { source: string }) => void;
431
  /** Controlled dropdown show state */
432
  show?: boolean;
433
  /** Toggle element type */
434
  toggleAs?: React.ElementType;
435
  /** Bootstrap CSS class prefix */
436
  bsPrefix?: string;
437
}
438
```
439

440
**SplitButton Usage Examples:**
441

442
```typescript
443
import { SplitButton, Dropdown } from "react-bootstrap";
444

445
// Basic split button
446
<SplitButton
447
  title="Split Button"
448
  id="segmented-button-dropdown-1"
449
  onClick={() => console.log('Button clicked')}
450
>
451
  <Dropdown.Item eventKey="1">Action</Dropdown.Item>
452
  <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
453
  <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
454
  <Dropdown.Divider />
455
  <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
456
</SplitButton>
457

458
// Different variants and sizes
459
<SplitButton
460
  variant="secondary"
461
  size="lg"
462
  title="Large Secondary"
463
  id="split-button-lg"
464
>
465
  <Dropdown.Item eventKey="1">Action</Dropdown.Item>
466
  <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
467
</SplitButton>
468

469
// Drop direction variants
470
<SplitButton
471
  drop="up"
472
  variant="info"
473
  title="Drop Up"
474
  id="dropdown-button-drop-up"
475
>
476
  <Dropdown.Item eventKey="1">Action</Dropdown.Item>
477
  <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
478
</SplitButton>
479
```
480

481
### CloseButton
482

483
Close button for dismissible components.
484

485
```typescript { .api }
486
/**
487
 * CloseButton component for dismissing components
488
 * @param variant - Color variant
489
 * @param disabled - Disabled state
490
 */
491
function CloseButton(props: CloseButtonProps): JSX.Element;
492

493
interface CloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
494
  /** Color variant */
495
  variant?: "white";
496
  /** Disabled state */
497
  disabled?: boolean;
498
  /** Bootstrap CSS class prefix */
499
  bsPrefix?: string;
500
}
501
```
502

503
**CloseButton Usage Examples:**
504

505
```typescript
506
import { CloseButton, Alert } from "react-bootstrap";
507

508
// Basic close button
509
<CloseButton onClick={() => setShow(false)} />
510

511
// White variant for dark backgrounds
512
<CloseButton variant="white" onClick={() => setShow(false)} />
513

514
// In an alert
515
<Alert variant="warning" dismissible onClose={() => setShow(false)}>
516
  <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
517
  <p>Change this and that and try again.</p>
518
</Alert>
519
```