0
# Feedback Components
1

2
User feedback elements including alerts, modals, toasts, tooltips, popovers, and other interactive feedback components for communicating with users.
3

4
## Capabilities
5

6
### Alert
7

8
Bootstrap alert component for displaying contextual feedback messages with optional dismiss functionality.
9

10
```javascript { .api }
11
/**
12
 * Bootstrap alert component for contextual feedback
13
 * @param props.color - Alert color theme (primary, secondary, success, info, warning, danger, light, dark)
14
 * @param props.isOpen - Control alert visibility
15
 * @param props.toggle - Function to dismiss alert
16
 * @param props.tag - HTML element to render as (default: 'div')
17
 * @param props.className - Additional CSS classes
18
 * @param props.cssModule - CSS Module mapping object
19
 * @param props.closeClassName - CSS classes for close button
20
 * @param props.closeAriaLabel - ARIA label for close button
21
 * @param props.fade - Enable fade transition
22
 * @param props.transition - Transition configuration object
23
 * @param props.innerRef - Ref forwarding
24
 * @param props.children - Alert content
25
 */
26
function Alert(props: {
27
  color?: string;
28
  isOpen?: boolean;
29
  toggle?: () => void;
30
  tag?: React.ElementType;
31
  className?: string;
32
  cssModule?: object;
33
  closeClassName?: string;
34
  closeAriaLabel?: string;
35
  fade?: boolean;
36
  transition?: object;
37
  innerRef?: React.Ref;
38
  children?: React.ReactNode;
39
}): JSX.Element;
40
```
41

42
### Modal
43

44
Bootstrap modal dialog component for displaying overlay content with backdrop and keyboard interaction support.
45

46
```javascript { .api }
47
/**
48
 * Bootstrap modal dialog component
49
 * @param props.isOpen - Control modal visibility (required)
50
 * @param props.toggle - Function to toggle modal visibility
51
 * @param props.keyboard - Close modal on Escape key (default: true)
52
 * @param props.backdrop - Show backdrop and close on click (true, false, 'static')
53
 * @param props.size - Modal size ('sm', 'lg', 'xl')
54
 * @param props.centered - Center modal vertically
55
 * @param props.scrollable - Make modal body scrollable
56
 * @param props.fade - Enable fade transition (default: true)
57
 * @param props.className - CSS classes for modal container
58
 * @param props.wrapClassName - CSS classes for modal wrapper
59
 * @param props.modalClassName - CSS classes for modal element
60
 * @param props.backdropClassName - CSS classes for backdrop
61
 * @param props.contentClassName - CSS classes for modal content
62
 * @param props.cssModule - CSS Module mapping object
63
 * @param props.zIndex - Z-index for modal (default: 1050)
64
 * @param props.role - ARIA role (default: 'dialog')
65
 * @param props.labelledBy - ARIA labelledby attribute
66
 * @param props.container - Container element for portal
67
 * @param props.onEnter - Callback when modal starts opening
68
 * @param props.onExit - Callback when modal starts closing
69
 * @param props.onOpened - Callback when modal finishes opening
70
 * @param props.onClosed - Callback when modal finishes closing
71
 * @param props.children - Modal content (ModalHeader, ModalBody, ModalFooter)
72
 */
73
function Modal(props: {
74
  isOpen: boolean;
75
  toggle?: () => void;
76
  keyboard?: boolean;
77
  backdrop?: boolean | 'static';
78
  size?: 'sm' | 'lg' | 'xl';
79
  centered?: boolean;
80
  scrollable?: boolean;
81
  fade?: boolean;
82
  className?: string;
83
  wrapClassName?: string;
84
  modalClassName?: string;
85
  backdropClassName?: string;
86
  contentClassName?: string;
87
  cssModule?: object;
88
  zIndex?: number;
89
  role?: string;
90
  labelledBy?: string;
91
  container?: Element | string;
92
  onEnter?: () => void;
93
  onExit?: () => void;
94
  onOpened?: () => void;
95
  onClosed?: () => void;
96
  children?: React.ReactNode;
97
}): JSX.Element;
98
```
99

100
### ModalHeader
101

102
Modal header component with optional close button and title styling.
103

104
```javascript { .api }
105
/**
106
 * Modal header component
107
 * @param props.tag - HTML element to render as (default: 'div')
108
 * @param props.wrapTag - HTML element for title wrapper (default: 'h4')
109
 * @param props.toggle - Function to close modal (shows close button)
110
 * @param props.className - Additional CSS classes
111
 * @param props.cssModule - CSS Module mapping object
112
 * @param props.children - Header content and title
113
 * @param props.close - Custom close button element
114
 * @param props.closeAriaLabel - ARIA label for close button
115
 * @param props.charCode - Character code for close button
116
 */
117
function ModalHeader(props: {
118
  tag?: React.ElementType;
119
  wrapTag?: React.ElementType;
120
  toggle?: () => void;
121
  className?: string;
122
  cssModule?: object;
123
  children?: React.ReactNode;
124
  close?: React.ReactNode;
125
  closeAriaLabel?: string;
126
  charCode?: number;
127
}): JSX.Element;
128
```
129

130
### ModalBody
131

132
Modal body component for main modal content area.
133

134
```javascript { .api }
135
/**
136
 * Modal body component for main content
137
 * @param props.tag - HTML element to render as (default: 'div')
138
 * @param props.className - Additional CSS classes
139
 * @param props.cssModule - CSS Module mapping object
140
 * @param props.children - Modal body content
141
 */
142
function ModalBody(props: {
143
  tag?: React.ElementType;
144
  className?: string;
145
  cssModule?: object;
146
  children?: React.ReactNode;
147
}): JSX.Element;
148
```
149

150
### ModalFooter
151

152
Modal footer component for action buttons and secondary content.
153

154
```javascript { .api }
155
/**
156
 * Modal footer component for actions and buttons
157
 * @param props.tag - HTML element to render as (default: 'div')
158
 * @param props.className - Additional CSS classes
159
 * @param props.cssModule - CSS Module mapping object
160
 * @param props.children - Footer content and buttons
161
 */
162
function ModalFooter(props: {
163
  tag?: React.ElementType;
164
  className?: string;
165
  cssModule?: object;
166
  children?: React.ReactNode;
167
}): JSX.Element;
168
```
169

170
### Toast
171

172
Bootstrap toast component for showing temporary notifications and messages.
173

174
```javascript { .api }
175
/**
176
 * Bootstrap toast notification component
177
 * @param props.isOpen - Control toast visibility
178
 * @param props.autoHide - Automatically hide toast after delay (default: true)
179
 * @param props.delay - Auto-hide delay in milliseconds (default: 5000)
180
 * @param props.tag - HTML element to render as (default: 'div')
181
 * @param props.className - Additional CSS classes
182
 * @param props.cssModule - CSS Module mapping object
183
 * @param props.transition - Transition configuration
184
 * @param props.fade - Enable fade transition (default: true)
185
 * @param props.innerRef - Ref forwarding
186
 * @param props.children - Toast content (ToastHeader, ToastBody)
187
 */
188
function Toast(props: {
189
  isOpen?: boolean;
190
  autoHide?: boolean;
191
  delay?: number;
192
  tag?: React.ElementType;
193
  className?: string;
194
  cssModule?: object;
195
  transition?: object;
196
  fade?: boolean;
197
  innerRef?: React.Ref;
198
  children?: React.ReactNode;
199
}): JSX.Element;
200
```
201

202
### ToastHeader
203

204
Toast header component with title, close button, and timestamp support.
205

206
```javascript { .api }
207
/**
208
 * Toast header component
209
 * @param props.tag - HTML element to render as (default: 'div')
210
 * @param props.icon - Icon element or component
211
 * @param props.iconClassName - CSS classes for icon
212
 * @param props.wrapTag - HTML element for content wrapper (default: 'strong')
213
 * @param props.toggle - Function to close toast (shows close button)
214
 * @param props.className - Additional CSS classes
215
 * @param props.cssModule - CSS Module mapping object
216
 * @param props.children - Header content and title
217
 * @param props.close - Custom close button element
218
 * @param props.closeAriaLabel - ARIA label for close button
219
 * @param props.charCode - Character code for close button
220
 * @param props.small - Small text timestamp element
221
 */
222
function ToastHeader(props: {
223
  tag?: React.ElementType;
224
  icon?: React.ReactNode;
225
  iconClassName?: string;
226
  wrapTag?: React.ElementType;
227
  toggle?: () => void;
228
  className?: string;
229
  cssModule?: object;
230
  children?: React.ReactNode;
231
  close?: React.ReactNode;
232
  closeAriaLabel?: string;
233
  charCode?: number;
234
  small?: React.ReactNode;
235
}): JSX.Element;
236
```
237

238
### ToastBody
239

240
Toast body component for main toast message content.
241

242
```javascript { .api }
243
/**
244
 * Toast body component for message content
245
 * @param props.tag - HTML element to render as (default: 'div')
246
 * @param props.className - Additional CSS classes
247
 * @param props.cssModule - CSS Module mapping object
248
 * @param props.children - Toast message content
249
 */
250
function ToastBody(props: {
251
  tag?: React.ElementType;
252
  className?: string;
253
  cssModule?: object;
254
  children?: React.ReactNode;
255
}): JSX.Element;
256
```
257

258
### Tooltip
259

260
Bootstrap tooltip component for displaying contextual information on hover or focus.
261

262
```javascript { .api }
263
/**
264
 * Bootstrap tooltip component
265
 * @param props.placement - Tooltip placement relative to target
266
 * @param props.isOpen - Control tooltip visibility
267
 * @param props.target - Target element (ID, ref, or element)
268
 * @param props.container - Container element for tooltip portal
269
 * @param props.delay - Show/hide delay configuration
270
 * @param props.flip - Enable flip modifier to prevent overflow
271
 * @param props.offset - Offset from target element
272
 * @param props.className - CSS classes for tooltip container
273
 * @param props.popperClassName - CSS classes for Popper element
274
 * @param props.innerClassName - CSS classes for tooltip inner
275
 * @param props.disabled - Disable tooltip interactions
276
 * @param props.hideArrow - Hide tooltip arrow
277
 * @param props.placementPrefix - Prefix for placement classes
278
 * @param props.arrowClassName - CSS classes for arrow element
279
 * @param props.fade - Enable fade transition (default: true)
280
 * @param props.cssModule - CSS Module mapping object
281
 * @param props.children - Tooltip content
282
 */
283
function Tooltip(props: {
284
  placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right';
285
  isOpen?: boolean;
286
  target: string | Element | React.RefObject;
287
  container?: string | Element;
288
  delay?: number | { show: number; hide: number };
289
  flip?: boolean;
290
  offset?: [number, number];
291
  className?: string;
292
  popperClassName?: string;
293
  innerClassName?: string;
294
  disabled?: boolean;
295
  hideArrow?: boolean;
296
  placementPrefix?: string;
297
  arrowClassName?: string;
298
  fade?: boolean;
299
  cssModule?: object;
300
  children?: React.ReactNode;
301
}): JSX.Element;
302
```
303

304
### Popover
305

306
Bootstrap popover component for displaying rich content in an overlay with title and body sections.
307

308
```javascript { .api }
309
/**
310
 * Bootstrap popover component for rich overlay content
311
 * @param props.placement - Popover placement relative to target
312
 * @param props.isOpen - Control popover visibility
313
 * @param props.target - Target element (ID, ref, or element)
314
 * @param props.container - Container element for popover portal
315
 * @param props.trigger - Trigger events ('click', 'hover', 'focus')
316
 * @param props.toggle - Function to toggle popover
317
 * @param props.delay - Show/hide delay configuration
318
 * @param props.flip - Enable flip modifier to prevent overflow
319
 * @param props.offset - Offset from target element
320
 * @param props.className - CSS classes for popover container
321
 * @param props.popperClassName - CSS classes for Popper element
322
 * @param props.innerClassName - CSS classes for popover inner
323
 * @param props.disabled - Disable popover interactions
324
 * @param props.hideArrow - Hide popover arrow
325
 * @param props.placementPrefix - Prefix for placement classes
326
 * @param props.arrowClassName - CSS classes for arrow element
327
 * @param props.fade - Enable fade transition (default: true)
328
 * @param props.cssModule - CSS Module mapping object
329
 * @param props.children - Popover content (PopoverHeader, PopoverBody)
330
 */
331
function Popover(props: {
332
  placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right';
333
  isOpen?: boolean;
334
  target: string | Element | React.RefObject;
335
  container?: string | Element;
336
  trigger?: string;
337
  toggle?: () => void;
338
  delay?: number | { show: number; hide: number };
339
  flip?: boolean;
340
  offset?: [number, number];
341
  className?: string;
342
  popperClassName?: string;
343
  innerClassName?: string;
344
  disabled?: boolean;
345
  hideArrow?: boolean;
346
  placementPrefix?: string;
347
  arrowClassName?: string;
348
  fade?: boolean;
349
  cssModule?: object;
350
  children?: React.ReactNode;
351
}): JSX.Element;
352
```
353

354
### PopoverHeader
355

356
Popover header component for titles and headings within popovers.
357

358
```javascript { .api }
359
/**
360
 * Popover header component
361
 * @param props.tag - HTML element to render as (default: 'h3')
362
 * @param props.className - Additional CSS classes
363
 * @param props.cssModule - CSS Module mapping object
364
 * @param props.children - Header content and title
365
 */
366
function PopoverHeader(props: {
367
  tag?: React.ElementType;
368
  className?: string;
369
  cssModule?: object;
370
  children?: React.ReactNode;
371
}): JSX.Element;
372
```
373

374
### PopoverBody
375

376
Popover body component for main popover content.
377

378
```javascript { .api }
379
/**
380
 * Popover body component for main content
381
 * @param props.tag - HTML element to render as (default: 'div')
382
 * @param props.className - Additional CSS classes
383
 * @param props.cssModule - CSS Module mapping object
384
 * @param props.children - Popover body content
385
 */
386
function PopoverBody(props: {
387
  tag?: React.ElementType;
388
  className?: string;
389
  cssModule?: object;
390
  children?: React.ReactNode;
391
}): JSX.Element;
392
```
393

394
## Uncontrolled Components
395

396
### UncontrolledAlert
397

398
Self-managing alert that handles its own open/close state with optional auto-dismiss functionality.
399

400
```javascript { .api }
401
/**
402
 * Self-managing alert component
403
 * @param props.defaultOpen - Initial open state (default: true)
404
 * @param ...otherProps - Same props as Alert except isOpen and toggle are handled internally
405
 */
406
function UncontrolledAlert(props: {
407
  defaultOpen?: boolean;
408
  color?: string;
409
  tag?: React.ElementType;
410
  className?: string;
411
  cssModule?: object;
412
  closeClassName?: string;
413
  closeAriaLabel?: string;
414
  fade?: boolean;
415
  children?: React.ReactNode;
416
}): JSX.Element;
417
```
418

419
### UncontrolledTooltip
420

421
Self-managing tooltip that handles its own show/hide state based on hover and focus events.
422

423
```javascript { .api }
424
/**
425
 * Self-managing tooltip component
426
 * @param props.defaultOpen - Initial open state
427
 * @param props.trigger - Trigger events ('hover', 'focus', 'click')
428
 * @param props.delay - Show/hide delay configuration
429
 * @param ...otherProps - Same props as Tooltip except isOpen is handled internally
430
 */
431
function UncontrolledTooltip(props: {
432
  defaultOpen?: boolean;
433
  trigger?: string;
434
  delay?: number | { show: number; hide: number };
435
  placement?: string;
436
  target: string | Element | React.RefObject;
437
  container?: string | Element;
438
  className?: string;
439
  cssModule?: object;
440
  children?: React.ReactNode;
441
}): JSX.Element;
442
```
443

444
### UncontrolledPopover
445

446
Self-managing popover that handles its own show/hide state with configurable trigger events.
447

448
```javascript { .api }
449
/**
450
 * Self-managing popover component
451
 * @param props.defaultOpen - Initial open state
452
 * @param props.trigger - Trigger events ('click', 'hover', 'focus')
453
 * @param props.delay - Show/hide delay configuration
454
 * @param ...otherProps - Same props as Popover except isOpen and toggle are handled internally
455
 */
456
function UncontrolledPopover(props: {
457
  defaultOpen?: boolean;
458
  trigger?: string;
459
  delay?: number | { show: number; hide: number };
460
  placement?: string;
461
  target: string | Element | React.RefObject;
462
  container?: string | Element;
463
  className?: string;
464
  cssModule?: object;
465
  children?: React.ReactNode;
466
}): JSX.Element;
467
```
468

469
## Usage Examples
470

471
### Basic Alerts
472

473
```jsx
474
import { Alert } from 'reactstrap';
475

476
function BasicAlerts() {
477
  return (
478
    <div>
479
      <Alert color="primary">
480
        A simple primary alert—check it out!
481
      </Alert>
482
      <Alert color="success">
483
        A simple success alert—check it out!
484
      </Alert>
485
      <Alert color="danger">
486
        A simple danger alert—check it out!
487
      </Alert>
488
      <Alert color="warning">
489
        A simple warning alert—check it out!
490
      </Alert>
491
    </div>
492
  );
493
}
494
```
495

496
### Dismissible Alert
497

498
```jsx
499
function DismissibleAlert() {
500
  const [visible, setVisible] = useState(true);
501

502
  return (
503
    <Alert color="info" isOpen={visible} toggle={() => setVisible(false)}>
504
      I am an alert and I can be dismissed!
505
    </Alert>
506
  );
507
}
508
```
509

510
### Uncontrolled Alert
511

512
```jsx
513
import { UncontrolledAlert } from 'reactstrap';
514

515
function SimpleAlert() {
516
  return (
517
    <UncontrolledAlert color="info">
518
      I am an alert and I can be dismissed!
519
    </UncontrolledAlert>
520
  );
521
}
522
```
523

524
### Basic Modal
525

526
```jsx
527
import { 
528
  Modal, 
529
  ModalHeader, 
530
  ModalBody, 
531
  ModalFooter, 
532
  Button 
533
} from 'reactstrap';
534

535
function BasicModal() {
536
  const [modal, setModal] = useState(false);
537
  const toggle = () => setModal(!modal);
538

539
  return (
540
    <div>
541
      <Button color="danger" onClick={toggle}>
542
        Open Modal
543
      </Button>
544
      <Modal isOpen={modal} toggle={toggle}>
545
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
546
        <ModalBody>
547
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
548
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
549
        </ModalBody>
550
        <ModalFooter>
551
          <Button color="primary" onClick={toggle}>
552
            Do Something
553
          </Button>{' '}
554
          <Button color="secondary" onClick={toggle}>
555
            Cancel
556
          </Button>
557
        </ModalFooter>
558
      </Modal>
559
    </div>
560
  );
561
}
562
```
563

564
### Modal Sizes
565

566
```jsx
567
function ModalSizes() {
568
  const [small, setSmall] = useState(false);
569
  const [large, setLarge] = useState(false);
570
  const [extraLarge, setExtraLarge] = useState(false);
571

572
  return (
573
    <div>
574
      <Button color="primary" onClick={() => setSmall(true)}>
575
        Small Modal
576
      </Button>
577
      <Button color="success" onClick={() => setLarge(true)}>
578
        Large Modal
579
      </Button>
580
      <Button color="info" onClick={() => setExtraLarge(true)}>
581
        Extra Large Modal
582
      </Button>
583

584
      <Modal size="sm" isOpen={small} toggle={() => setSmall(false)}>
585
        <ModalHeader>Small Modal</ModalHeader>
586
        <ModalBody>Small modal content</ModalBody>
587
      </Modal>
588

589
      <Modal size="lg" isOpen={large} toggle={() => setLarge(false)}>
590
        <ModalHeader>Large Modal</ModalHeader>
591
        <ModalBody>Large modal content</ModalBody>
592
      </Modal>
593

594
      <Modal size="xl" isOpen={extraLarge} toggle={() => setExtraLarge(false)}>
595
        <ModalHeader>Extra Large Modal</ModalHeader>
596
        <ModalBody>Extra large modal content</ModalBody>
597
      </Modal>
598
    </div>
599
  );
600
}
601
```
602

603
### Toast Notifications
604

605
```jsx
606
import { Toast, ToastHeader, ToastBody, Button } from 'reactstrap';
607

608
function ToastNotification() {
609
  const [toast, setToast] = useState(false);
610

611
  return (
612
    <div>
613
      <Button color="primary" onClick={() => setToast(true)}>
614
        Show Toast
615
      </Button>
616
      
617
      <div className="p-3 my-2 rounded" style={{position: 'fixed', top: 0, right: 0, zIndex: 1050}}>
618
        <Toast isOpen={toast}>
619
          <ToastHeader 
620
            icon="primary" 
621
            toggle={() => setToast(false)}
622
          >
623
            Reactstrap
624
          </ToastHeader>
625
          <ToastBody>
626
            Hello, world! This is a toast message.
627
          </ToastBody>
628
        </Toast>
629
      </div>
630
    </div>
631
  );
632
}
633
```
634

635
### Tooltips
636

637
```jsx
638
import { Button, Tooltip } from 'reactstrap';
639

640
function TooltipExample() {
641
  const [tooltipOpen, setTooltipOpen] = useState(false);
642

643
  return (
644
    <div>
645
      <Button id="TooltipExample" color="secondary">
646
        Hover over me
647
      </Button>
648
      <Tooltip
649
        placement="top"
650
        isOpen={tooltipOpen}
651
        target="TooltipExample"
652
        toggle={() => setTooltipOpen(!tooltipOpen)}
653
      >
654
        Hello world!
655
      </Tooltip>
656
    </div>
657
  );
658
}
659
```
660

661
### Uncontrolled Tooltip
662

663
```jsx
664
import { Button, UncontrolledTooltip } from 'reactstrap';
665

666
function SimpleTooltip() {
667
  return (
668
    <div>
669
      <Button id="UncontrolledTooltipExample" color="secondary">
670
        Hover over me
671
      </Button>
672
      <UncontrolledTooltip placement="top" target="UncontrolledTooltipExample">
673
        Hello world!
674
      </UncontrolledTooltip>
675
    </div>
676
  );
677
}
678
```
679

680
### Popovers
681

682
```jsx
683
import { 
684
  Button, 
685
  Popover, 
686
  PopoverHeader, 
687
  PopoverBody 
688
} from 'reactstrap';
689

690
function PopoverExample() {
691
  const [popoverOpen, setPopoverOpen] = useState(false);
692

693
  return (
694
    <div>
695
      <Button id="PopoverExample" color="info">
696
        Click me
697
      </Button>
698
      <Popover
699
        placement="bottom"
700
        isOpen={popoverOpen}
701
        target="PopoverExample"
702
        toggle={() => setPopoverOpen(!popoverOpen)}
703
      >
704
        <PopoverHeader>Popover Title</PopoverHeader>
705
        <PopoverBody>
706
          Sed posuere consectetur est at lobortis. Aenean eu leo quam.
707
        </PopoverBody>
708
      </Popover>
709
    </div>
710
  );
711
}
712
```
713

714
### Uncontrolled Popover
715

716
```jsx
717
import { 
718
  Button, 
719
  UncontrolledPopover, 
720
  PopoverHeader, 
721
  PopoverBody 
722
} from 'reactstrap';
723

724
function SimplePopover() {
725
  return (
726
    <div>
727
      <Button id="UncontrolledPopoverExample" color="info">
728
        Click me
729
      </Button>
730
      <UncontrolledPopover placement="bottom" target="UncontrolledPopoverExample">
731
        <PopoverHeader>Popover Title</PopoverHeader>
732
        <PopoverBody>
733
          Sed posuere consectetur est at lobortis. Aenean eu leo quam.
734
        </PopoverBody>
735
      </UncontrolledPopover>
736
    </div>
737
  );
738
}
739
```