0
# Feedback Components
1
2
Alerts, badges, progress bars, spinners, and toast notifications for user feedback, status indication, and loading states.
3
4
## Capabilities
5
6
### Alert
7
8
Alert message component for displaying important information and status updates.
9
10
```python { .api }
11
class Alert:
12
"""
13
Alert component for displaying messages and notifications.
14
15
Args:
16
children: Alert content (text or components)
17
id (str): Component identifier for callbacks
18
style (dict): Inline CSS styles
19
class_name (str): Additional CSS classes
20
color (str): Alert color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
21
dismissable (bool): Show close button for dismissing alert
22
is_open (bool): Control alert visibility
23
fade (bool): Enable fade animation when dismissing
24
duration (int): Auto-dismiss after milliseconds (0 = no auto-dismiss)
25
"""
26
def __init__(self, children=None, id=None, style=None, class_name=None,
27
color="primary", dismissable=False, is_open=True, fade=True, duration=0, **kwargs): ...
28
```
29
30
### Badge
31
32
Small count and status indicator component.
33
34
```python { .api }
35
class Badge:
36
"""
37
Badge component for counts, labels, and status indicators.
38
39
Args:
40
children: Badge content (text or number)
41
id (str): Component identifier
42
style (dict): Inline CSS styles
43
class_name (str): Additional CSS classes
44
color (str): Badge color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
45
pill (bool): Rounded pill style
46
href (str): Make badge a link
47
external_link (bool): Open link in new tab
48
target (str): Link target
49
"""
50
def __init__(self, children=None, id=None, style=None, class_name=None,
51
color="primary", pill=False, href=None, external_link=False, target=None, **kwargs): ...
52
```
53
54
### Progress
55
56
Progress bar component for indicating task completion and loading states.
57
58
```python { .api }
59
class Progress:
60
"""
61
Progress bar component for showing completion status.
62
63
Args:
64
children: Progress bar content (optional label)
65
id (str): Component identifier for callbacks
66
style (dict): Inline CSS styles
67
class_name (str): Additional CSS classes
68
value (int|float): Current progress value
69
max (int|float): Maximum progress value
70
striped (bool): Add striped pattern
71
animated (bool): Animate striped pattern
72
color (str): Progress bar color - "primary", "secondary", "success", "info", "warning", "danger"
73
bar_style (dict): Styles for progress bar element
74
bar_class_name (str): CSS classes for progress bar element
75
label (str): Progress label text
76
"""
77
def __init__(self, children=None, id=None, style=None, class_name=None,
78
value=0, max=100, striped=False, animated=False, color=None,
79
bar_style=None, bar_class_name=None, label=None, **kwargs): ...
80
```
81
82
### Spinner
83
84
Loading spinner component for indicating processing states.
85
86
```python { .api }
87
class Spinner:
88
"""
89
Loading spinner component for indicating processing.
90
91
Args:
92
id (str): Component identifier
93
style (dict): Inline CSS styles
94
class_name (str): Additional CSS classes
95
size (str): Spinner size - "sm"
96
color (str): Spinner color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "muted"
97
type (str): Spinner type - "border" (default) or "grow"
98
spinner_style (dict): Styles for spinner element
99
spinner_class_name (str): CSS classes for spinner element
100
"""
101
def __init__(self, id=None, style=None, class_name=None, size=None, color=None,
102
type="border", spinner_style=None, spinner_class_name=None, **kwargs): ...
103
```
104
105
### Toast
106
107
Toast notification component for temporary messages and alerts.
108
109
```python { .api }
110
class Toast:
111
"""
112
Toast notification component for temporary messages.
113
114
Args:
115
children: Toast content
116
id (str): Component identifier for callbacks
117
header (str|component): Toast header content
118
style (dict): Inline CSS styles
119
class_name (str): Additional CSS classes
120
is_open (bool): Control toast visibility
121
dismissable (bool): Show close button
122
icon (str): Icon class for toast header
123
duration (int): Auto-dismiss after milliseconds (0 = no auto-dismiss)
124
"""
125
def __init__(self, children=None, id=None, header=None, style=None, class_name=None,
126
is_open=False, dismissable=True, icon=None, duration=4000, **kwargs): ...
127
```
128
129
## Usage Examples
130
131
### Basic Alerts
132
133
```python
134
import dash_bootstrap_components as dbc
135
from dash import html
136
137
# Different alert colors
138
alerts = html.Div([
139
dbc.Alert("Primary alert", color="primary", className="mb-2"),
140
dbc.Alert("Secondary alert", color="secondary", className="mb-2"),
141
dbc.Alert("Success alert", color="success", className="mb-2"),
142
dbc.Alert("Info alert", color="info", className="mb-2"),
143
dbc.Alert("Warning alert", color="warning", className="mb-2"),
144
dbc.Alert("Danger alert", color="danger", className="mb-2"),
145
dbc.Alert("Light alert", color="light", className="mb-2"),
146
dbc.Alert("Dark alert", color="dark"),
147
])
148
```
149
150
### Dismissable Alerts
151
152
```python
153
from dash import callback, Input, Output
154
155
# Alert with dismiss functionality
156
dismissable_alert = html.Div([
157
dbc.Alert(
158
"This alert can be dismissed!",
159
id="dismissable-alert",
160
dismissable=True,
161
is_open=True,
162
color="warning",
163
),
164
dbc.Button("Show Alert Again", id="show-alert-btn", color="primary"),
165
])
166
167
@callback(
168
Output("dismissable-alert", "is_open"),
169
[Input("show-alert-btn", "n_clicks")],
170
)
171
def show_alert(n_clicks):
172
if n_clicks:
173
return True
174
return False
175
```
176
177
### Auto-dismiss Alert
178
179
```python
180
# Alert that auto-dismisses after 5 seconds
181
auto_dismiss_alert = html.Div([
182
dbc.Button("Show Timed Alert", id="timed-alert-btn", color="info"),
183
dbc.Alert(
184
"This alert will disappear in 5 seconds!",
185
id="timed-alert",
186
is_open=False,
187
duration=5000,
188
color="info",
189
),
190
])
191
192
@callback(
193
Output("timed-alert", "is_open"),
194
[Input("timed-alert-btn", "n_clicks")],
195
)
196
def show_timed_alert(n_clicks):
197
if n_clicks:
198
return True
199
return False
200
```
201
202
### Badges
203
204
```python
205
# Different badge styles and colors
206
badges = html.Div([
207
html.H4([
208
"Notifications ",
209
dbc.Badge("4", color="danger", pill=True),
210
], className="mb-3"),
211
html.P([
212
"Messages ",
213
dbc.Badge("New", color="success"),
214
" and alerts ",
215
dbc.Badge("2", color="warning", pill=True),
216
], className="mb-3"),
217
html.Div([
218
dbc.Badge("Primary", color="primary", className="me-1"),
219
dbc.Badge("Secondary", color="secondary", className="me-1"),
220
dbc.Badge("Success", color="success", className="me-1"),
221
dbc.Badge("Info", color="info", className="me-1"),
222
dbc.Badge("Warning", color="warning", className="me-1"),
223
dbc.Badge("Danger", color="danger", className="me-1"),
224
dbc.Badge("Light", color="light", className="me-1"),
225
dbc.Badge("Dark", color="dark"),
226
], className="mb-3"),
227
html.Div([
228
dbc.Badge("Pill Primary", color="primary", pill=True, className="me-1"),
229
dbc.Badge("Pill Success", color="success", pill=True, className="me-1"),
230
dbc.Badge("Pill Danger", color="danger", pill=True),
231
]),
232
])
233
```
234
235
### Progress Bars
236
237
```python
238
from dash import callback, Input, Output, dcc
239
import time
240
241
# Different progress bar styles
242
progress_bars = html.Div([
243
html.H5("Basic Progress", className="mb-2"),
244
dbc.Progress(value=25, className="mb-3"),
245
246
html.H5("Colored Progress", className="mb-2"),
247
dbc.Progress(value=60, color="success", className="mb-3"),
248
249
html.H5("Striped Progress", className="mb-2"),
250
dbc.Progress(value=75, striped=True, color="info", className="mb-3"),
251
252
html.H5("Animated Progress", className="mb-2"),
253
dbc.Progress(value=40, striped=True, animated=True, color="warning", className="mb-3"),
254
255
html.H5("Progress with Label", className="mb-2"),
256
dbc.Progress(value=85, label="85%", color="danger"),
257
])
258
259
# Interactive progress bar
260
interactive_progress = html.Div([
261
dbc.Button("Start Progress", id="progress-btn", color="primary"),
262
dbc.Progress(id="progress-bar", value=0, className="mt-3"),
263
dcc.Interval(id="progress-interval", interval=100, n_intervals=0, disabled=True),
264
])
265
266
@callback(
267
[Output("progress-interval", "disabled"), Output("progress-bar", "value")],
268
[Input("progress-btn", "n_clicks"), Input("progress-interval", "n_intervals")],
269
)
270
def update_progress(btn_clicks, n_intervals):
271
if btn_clicks and n_intervals < 100:
272
return False, n_intervals
273
return True, 0 if not btn_clicks else 100
274
```
275
276
### Spinners
277
278
```python
279
# Different spinner types and sizes
280
spinners = html.Div([
281
html.H5("Border Spinners", className="mb-3"),
282
html.Div([
283
dbc.Spinner(color="primary", className="me-2"),
284
dbc.Spinner(color="success", className="me-2"),
285
dbc.Spinner(color="danger", className="me-2"),
286
dbc.Spinner(size="sm", color="info"),
287
], className="mb-4"),
288
289
html.H5("Grow Spinners", className="mb-3"),
290
html.Div([
291
dbc.Spinner(type="grow", color="primary", className="me-2"),
292
dbc.Spinner(type="grow", color="success", className="me-2"),
293
dbc.Spinner(type="grow", color="danger", className="me-2"),
294
dbc.Spinner(type="grow", size="sm", color="info"),
295
]),
296
])
297
298
# Spinner with loading content
299
loading_spinner = html.Div([
300
dbc.Button("Load Data", id="load-btn", color="primary"),
301
html.Div(id="loading-content", className="mt-3"),
302
])
303
304
@callback(
305
Output("loading-content", "children"),
306
[Input("load-btn", "n_clicks")],
307
prevent_initial_call=True
308
)
309
def show_loading(n_clicks):
310
if n_clicks:
311
time.sleep(2) # Simulate loading
312
return dbc.Alert("Data loaded successfully!", color="success")
313
return dbc.Spinner(color="primary")
314
```
315
316
### Toast Notifications
317
318
```python
319
from dash import callback, Input, Output
320
321
# Toast notification system
322
toast_example = html.Div([
323
dbc.ButtonGroup([
324
dbc.Button("Success Toast", id="success-toast-btn", color="success"),
325
dbc.Button("Warning Toast", id="warning-toast-btn", color="warning"),
326
dbc.Button("Error Toast", id="error-toast-btn", color="danger"),
327
]),
328
329
# Toast container
330
html.Div([
331
dbc.Toast(
332
"Operation completed successfully!",
333
id="success-toast",
334
header="Success",
335
icon="success",
336
is_open=False,
337
dismissable=True,
338
duration=4000,
339
style={"position": "fixed", "top": 66, "right": 10, "width": 350, "zIndex": 1050},
340
),
341
dbc.Toast(
342
"Please check your input and try again.",
343
id="warning-toast",
344
header="Warning",
345
icon="warning",
346
is_open=False,
347
dismissable=True,
348
duration=4000,
349
style={"position": "fixed", "top": 66, "right": 10, "width": 350, "zIndex": 1050},
350
),
351
dbc.Toast(
352
"An error occurred while processing your request.",
353
id="error-toast",
354
header="Error",
355
icon="danger",
356
is_open=False,
357
dismissable=True,
358
duration=6000,
359
style={"position": "fixed", "top": 66, "right": 10, "width": 350, "zIndex": 1050},
360
),
361
]),
362
])
363
364
@callback(
365
Output("success-toast", "is_open"),
366
[Input("success-toast-btn", "n_clicks")],
367
)
368
def show_success_toast(n_clicks):
369
return bool(n_clicks)
370
371
@callback(
372
Output("warning-toast", "is_open"),
373
[Input("warning-toast-btn", "n_clicks")],
374
)
375
def show_warning_toast(n_clicks):
376
return bool(n_clicks)
377
378
@callback(
379
Output("error-toast", "is_open"),
380
[Input("error-toast-btn", "n_clicks")],
381
)
382
def show_error_toast(n_clicks):
383
return bool(n_clicks)
384
```
385
386
### Status Dashboard
387
388
```python
389
# Complete status dashboard with various feedback components
390
status_dashboard = dbc.Container([
391
dbc.Row([
392
dbc.Col([
393
dbc.Card([
394
dbc.CardHeader("System Status"),
395
dbc.CardBody([
396
html.Div([
397
html.Span("Database: "),
398
dbc.Badge("Online", color="success", pill=True),
399
], className="mb-2"),
400
html.Div([
401
html.Span("API: "),
402
dbc.Badge("Healthy", color="success", pill=True),
403
], className="mb-2"),
404
html.Div([
405
html.Span("Cache: "),
406
dbc.Badge("Warning", color="warning", pill=True),
407
]),
408
])
409
])
410
], width=6),
411
dbc.Col([
412
dbc.Card([
413
dbc.CardHeader("Processing Status"),
414
dbc.CardBody([
415
html.P("Data Processing Progress:", className="mb-1"),
416
dbc.Progress(value=73, label="73%", color="info", className="mb-3"),
417
html.P("Queue Status:", className="mb-1"),
418
dbc.Progress(value=45, striped=True, animated=True, color="warning"),
419
])
420
])
421
], width=6),
422
], className="mb-4"),
423
dbc.Row([
424
dbc.Col([
425
dbc.Alert([
426
html.H4("System Maintenance", className="alert-heading"),
427
html.P("Scheduled maintenance will occur tonight from 2:00 AM to 4:00 AM EST."),
428
html.Hr(),
429
html.P("Please save your work before this time.", className="mb-0"),
430
], color="info", className="mb-3"),
431
dbc.Alert("All systems operational", color="success", dismissable=True),
432
])
433
])
434
])
435
```