0
# Button Components
1

2
Button elements including individual buttons, button groups, dropdown buttons, and interactive button components for user actions.
3

4
## Capabilities
5

6
### Button
7

8
Bootstrap button component with extensive customization options for colors, sizes, states, and behaviors.
9

10
```javascript { .api }
11
/**
12
 * Bootstrap button component
13
 * @param props.active - Manually set button visual state to active
14
 * @param props.aria-label - ARIA label for accessibility
15
 * @param props.block - Make button full-width (deprecated in Bootstrap 5, use className="d-block w-100")
16
 * @param props.color - Button color theme (primary, secondary, success, info, warning, danger, light, dark)
17
 * @param props.disabled - Disable the button
18
 * @param props.outline - Use outline button style
19
 * @param props.size - Button size ('sm' or 'lg')
20
 * @param props.tag - HTML element to render as (default: 'button')
21
 * @param props.innerRef - Ref forwarding
22
 * @param props.close - Render as close button (uses CloseButton internally)
23
 * @param props.onClick - Click event handler
24
 * @param props.className - Additional CSS classes
25
 * @param props.cssModule - CSS Module mapping object
26
 * @param props.children - Button content
27
 */
28
function Button(props: {
29
  active?: boolean;
30
  'aria-label'?: string;
31
  block?: boolean;
32
  color?: string;
33
  disabled?: boolean;
34
  outline?: boolean;
35
  size?: 'sm' | 'lg';
36
  tag?: React.ElementType;
37
  innerRef?: React.Ref;
38
  close?: boolean;
39
  onClick?: (event: React.MouseEvent) => void;
40
  className?: string;
41
  cssModule?: object;
42
  children?: React.ReactNode;
43
  [key: string]: any;
44
}): JSX.Element;
45
```
46

47
### ButtonGroup
48

49
Container component for grouping buttons together with consistent spacing and alignment.
50

51
```javascript { .api }
52
/**
53
 * Button group container
54
 * @param props.size - Size for all buttons in group ('sm' or 'lg')
55
 * @param props.vertical - Stack buttons vertically
56
 * @param props.tag - HTML element to render as (default: 'div')
57
 * @param props.role - ARIA role (default: 'group')
58
 * @param props.className - Additional CSS classes
59
 * @param props.cssModule - CSS Module mapping object
60
 * @param props.children - Button components
61
 */
62
function ButtonGroup(props: {
63
  size?: 'sm' | 'lg';
64
  vertical?: boolean;
65
  tag?: React.ElementType;
66
  role?: string;
67
  className?: string;
68
  cssModule?: object;
69
  children?: React.ReactNode;
70
}): JSX.Element;
71
```
72

73
### ButtonToolbar
74

75
Toolbar component for combining multiple button groups with proper spacing.
76

77
```javascript { .api }
78
/**
79
 * Button toolbar for combining button groups
80
 * @param props.tag - HTML element to render as (default: 'div')
81
 * @param props.role - ARIA role (default: 'toolbar')
82
 * @param props.className - Additional CSS classes
83
 * @param props.cssModule - CSS Module mapping object
84
 * @param props.children - ButtonGroup components and other elements
85
 */
86
function ButtonToolbar(props: {
87
  tag?: React.ElementType;
88
  role?: string;
89
  className?: string;
90
  cssModule?: object;
91
  children?: React.ReactNode;
92
}): JSX.Element;
93
```
94

95
### ButtonToggle
96

97
Toggle button component that maintains active/inactive state for on/off interactions.
98

99
```javascript { .api }
100
/**
101
 * Toggle button component
102
 * @param props.active - Button active/pressed state
103
 * @param props.color - Button color theme
104
 * @param props.disabled - Disable the button
105
 * @param props.outline - Use outline button style
106
 * @param props.size - Button size ('sm' or 'lg')
107
 * @param props.tag - HTML element to render as (default: 'button')
108
 * @param props.innerRef - Ref forwarding
109
 * @param props.className - Additional CSS classes
110
 * @param props.cssModule - CSS Module mapping object
111
 * @param props.children - Button content
112
 */
113
function ButtonToggle(props: {
114
  active?: boolean;
115
  color?: string;
116
  disabled?: boolean;
117
  outline?: boolean;
118
  size?: 'sm' | 'lg';
119
  tag?: React.ElementType;
120
  innerRef?: React.Ref;
121
  className?: string;
122
  cssModule?: object;
123
  children?: React.ReactNode;
124
  [key: string]: any;
125
}): JSX.Element;
126
```
127

128
### ButtonDropdown
129

130
Button with dropdown functionality combining button and dropdown menu behavior.
131

132
```javascript { .api }
133
/**
134
 * Button with dropdown functionality
135
 * @param props.disabled - Disable the button and dropdown
136
 * @param props.direction - Dropdown direction ('up', 'down', 'left', 'right')
137
 * @param props.group - Apply button group styling
138
 * @param props.isOpen - Control dropdown open state
139
 * @param props.nav - Apply navigation styling
140
 * @param props.addonType - Addon type for input groups
141
 * @param props.size - Button size ('sm' or 'lg')
142
 * @param props.tag - HTML element to render as (default: 'div')
143
 * @param props.toggle - Function to toggle dropdown state
144
 * @param props.className - Additional CSS classes
145
 * @param props.cssModule - CSS Module mapping object
146
 * @param props.children - DropdownToggle and DropdownMenu components
147
 */
148
function ButtonDropdown(props: {
149
  disabled?: boolean;
150
  direction?: 'up' | 'down' | 'left' | 'right';
151
  group?: boolean;
152
  isOpen: boolean;
153
  nav?: boolean;
154
  addonType?: string;
155
  size?: 'sm' | 'lg';
156
  tag?: React.ElementType;
157
  toggle: () => void;
158
  className?: string;
159
  cssModule?: object;
160
  children?: React.ReactNode;
161
}): JSX.Element;
162
```
163

164
### CloseButton
165

166
Dedicated close button component for dismissible content like alerts and modals.
167

168
```javascript { .api }
169
/**
170
 * Close button component
171
 * @param props.tag - HTML element to render as (default: 'button')
172
 * @param props.className - Additional CSS classes
173
 * @param props.cssModule - CSS Module mapping object
174
 */
175
function CloseButton(props: {
176
  tag?: React.ElementType;
177
  className?: string;
178
  cssModule?: object;
179
  [key: string]: any;
180
}): JSX.Element;
181
```
182

183
## Uncontrolled Components
184

185
### UncontrolledButtonDropdown
186

187
Self-managing button dropdown that handles its own open/close state internally.
188

189
```javascript { .api }
190
/**
191
 * Self-managing button dropdown component
192
 * @param props.defaultOpen - Initial open state
193
 * @param props.onToggle - Callback when dropdown state changes
194
 * @param ...otherProps - Same props as ButtonDropdown except isOpen and toggle
195
 */
196
function UncontrolledButtonDropdown(props: {
197
  defaultOpen?: boolean;
198
  onToggle?: (isOpen: boolean) => void;
199
  disabled?: boolean;
200
  direction?: 'up' | 'down' | 'left' | 'right';
201
  group?: boolean;
202
  nav?: boolean;
203
  addonType?: string;
204
  size?: 'sm' | 'lg';
205
  tag?: React.ElementType;
206
  className?: string;
207
  cssModule?: object;
208
  children?: React.ReactNode;
209
}): JSX.Element;
210
```
211

212
## Usage Examples
213

214
### Basic Buttons
215

216
```jsx
217
import { Button } from 'reactstrap';
218

219
function BasicButtons() {
220
  return (
221
    <div>
222
      <Button color="primary">Primary</Button>{' '}
223
      <Button color="secondary">Secondary</Button>{' '}
224
      <Button color="success">Success</Button>{' '}
225
      <Button color="info">Info</Button>{' '}
226
      <Button color="warning">Warning</Button>{' '}
227
      <Button color="danger">Danger</Button>{' '}
228
      <Button color="light">Light</Button>{' '}
229
      <Button color="dark">Dark</Button>
230
    </div>
231
  );
232
}
233
```
234

235
### Outline Buttons
236

237
```jsx
238
function OutlineButtons() {
239
  return (
240
    <div>
241
      <Button outline color="primary">Primary</Button>{' '}
242
      <Button outline color="secondary">Secondary</Button>{' '}
243
      <Button outline color="success">Success</Button>{' '}
244
      <Button outline color="info">Info</Button>{' '}
245
      <Button outline color="warning">Warning</Button>{' '}
246
      <Button outline color="danger">Danger</Button>
247
    </div>
248
  );
249
}
250
```
251

252
### Button Sizes
253

254
```jsx
255
function ButtonSizes() {
256
  return (
257
    <div>
258
      <Button color="primary" size="lg">Large button</Button>{' '}
259
      <Button color="secondary" size="lg">Large button</Button>
260
      <br />
261
      <Button color="primary">Default button</Button>{' '}
262
      <Button color="secondary">Default button</Button>
263
      <br />
264
      <Button color="primary" size="sm">Small button</Button>{' '}
265
      <Button color="secondary" size="sm">Small button</Button>
266
    </div>
267
  );
268
}
269
```
270

271
### Button States
272

273
```jsx
274
function ButtonStates() {
275
  return (
276
    <div>
277
      <Button color="primary" active>Active state</Button>{' '}
278
      <Button color="primary" disabled>Disabled</Button>{' '}
279
      <Button color="primary" onClick={() => alert('Clicked!')}>
280
        Click me
281
      </Button>
282
    </div>
283
  );
284
}
285
```
286

287
### Block Buttons (Bootstrap 5 approach)
288

289
```jsx
290
function BlockButtons() {
291
  return (
292
    <div className="d-grid gap-2">
293
      <Button color="primary" className="btn-block">Block button</Button>
294
      <Button color="secondary" className="btn-block">Block button</Button>
295
    </div>
296
  );
297
}
298
```
299

300
### Button Groups
301

302
```jsx
303
import { ButtonGroup, Button } from 'reactstrap';
304

305
function ButtonGroups() {
306
  return (
307
    <div>
308
      <ButtonGroup>
309
        <Button>Left</Button>
310
        <Button>Middle</Button>
311
        <Button>Right</Button>
312
      </ButtonGroup>
313
      <br />
314
      <ButtonGroup size="sm">
315
        <Button color="secondary">Small</Button>
316
        <Button color="secondary">Small</Button>
317
        <Button color="secondary">Small</Button>
318
      </ButtonGroup>
319
      <br />
320
      <ButtonGroup size="lg">
321
        <Button color="info">Large</Button>
322
        <Button color="info">Large</Button>
323
        <Button color="info">Large</Button>
324
      </ButtonGroup>
325
    </div>
326
  );
327
}
328
```
329

330
### Vertical Button Group
331

332
```jsx
333
function VerticalButtonGroup() {
334
  return (
335
    <ButtonGroup vertical>
336
      <Button>Top</Button>
337
      <Button>Middle</Button>
338
      <Button>Bottom</Button>
339
    </ButtonGroup>
340
  );
341
}
342
```
343

344
### Button Toolbar
345

346
```jsx
347
import { ButtonToolbar, ButtonGroup, Button } from 'reactstrap';
348

349
function ButtonToolbars() {
350
  return (
351
    <ButtonToolbar>
352
      <ButtonGroup className="me-2">
353
        <Button>1</Button>
354
        <Button>2</Button>
355
        <Button>3</Button>
356
        <Button>4</Button>
357
      </ButtonGroup>
358
      <ButtonGroup className="me-2">
359
        <Button>5</Button>
360
        <Button>6</Button>
361
        <Button>7</Button>
362
      </ButtonGroup>
363
      <ButtonGroup>
364
        <Button>8</Button>
365
      </ButtonGroup>
366
    </ButtonToolbar>
367
  );
368
}
369
```
370

371
### Toggle Buttons
372

373
```jsx
374
import { ButtonToggle } from 'reactstrap';
375

376
function ToggleButtons() {
377
  const [active, setActive] = useState(false);
378

379
  return (
380
    <div>
381
      <ButtonToggle 
382
        color="primary" 
383
        active={active}
384
        onClick={() => setActive(!active)}
385
      >
386
        {active ? 'Active' : 'Inactive'}
387
      </ButtonToggle>
388
    </div>
389
  );
390
}
391
```
392

393
### Button Dropdown
394

395
```jsx
396
import { 
397
  ButtonDropdown, 
398
  DropdownToggle, 
399
  DropdownMenu, 
400
  DropdownItem 
401
} from 'reactstrap';
402

403
function ButtonDropdowns() {
404
  const [dropdownOpen, setDropdownOpen] = useState(false);
405

406
  return (
407
    <ButtonDropdown 
408
      isOpen={dropdownOpen} 
409
      toggle={() => setDropdownOpen(!dropdownOpen)}
410
    >
411
      <DropdownToggle caret color="primary">
412
        Button Dropdown
413
      </DropdownToggle>
414
      <DropdownMenu>
415
        <DropdownItem>Action</DropdownItem>
416
        <DropdownItem>Another Action</DropdownItem>
417
        <DropdownItem divider />
418
        <DropdownItem>Something else here</DropdownItem>
419
      </DropdownMenu>
420
    </ButtonDropdown>
421
  );
422
}
423
```
424

425
### Split Button Dropdown
426

427
```jsx
428
function SplitButtonDropdown() {
429
  const [dropdownOpen, setDropdownOpen] = useState(false);
430

431
  return (
432
    <ButtonDropdown 
433
      isOpen={dropdownOpen} 
434
      toggle={() => setDropdownOpen(!dropdownOpen)}
435
    >
436
      <Button color="primary">Split Button</Button>
437
      <DropdownToggle split color="primary" />
438
      <DropdownMenu>
439
        <DropdownItem>Action</DropdownItem>
440
        <DropdownItem>Another Action</DropdownItem>
441
      </DropdownMenu>
442
    </ButtonDropdown>
443
  );
444
}
445
```
446

447
### Uncontrolled Button Dropdown
448

449
```jsx
450
import { 
451
  UncontrolledButtonDropdown, 
452
  DropdownToggle, 
453
  DropdownMenu, 
454
  DropdownItem 
455
} from 'reactstrap';
456

457
function UncontrolledExample() {
458
  return (
459
    <UncontrolledButtonDropdown>
460
      <DropdownToggle caret color="secondary">
461
        Uncontrolled
462
      </DropdownToggle>
463
      <DropdownMenu>
464
        <DropdownItem>Action</DropdownItem>
465
        <DropdownItem>Another Action</DropdownItem>
466
      </DropdownMenu>
467
    </UncontrolledButtonDropdown>
468
  );
469
}
470
```