0
# Button Components
1

2
Interactive buttons and button groups with various styles, sizes, and states for user actions and interface controls.
3

4
## Capabilities
5

6
### Button
7

8
Primary interactive button component with extensive styling and state options.
9

10
```python { .api }
11
class Button:
12
    """
13
    Interactive button component with Bootstrap styling and Dash integration.
14
    
15
    Args:
16
        children: Button text or content
17
        id (str): Component identifier for callbacks
18
        n_clicks (int): Number of times button has been clicked (for callbacks)
19
        style (dict): Inline CSS styles
20
        class_name (str): Additional CSS classes
21
        color (str): Button color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "link"
22
        size (str): Button size - "sm", "lg"
23
        outline (bool): Use outline style instead of solid
24
        active (bool): Force active state styling
25
        disabled (bool): Disable button interaction
26
        href (str): URL to navigate to when clicked
27
        target (str): Link target - "_blank", "_self", "_parent", "_top"
28
        external_link (bool): If True, behave like hyperlink; if False, behave like dcc.Link
29
        download (str): Filename for download links
30
        type (str): HTML button type - "button", "submit", "reset" (default depends on context)
31
        name (str): HTML name attribute for form submission
32
        value (str): HTML value attribute for form submission
33
        title (str): Tooltip text for the button
34
        rel (str): Link relationship attribute (for href links)
35
        key (str): React performance optimization key
36
    """
37
    def __init__(self, children=None, id=None, n_clicks=0, style=None, class_name=None,
38
                 color="primary", size=None, outline=False, active=False, disabled=False,
39
                 href=None, target=None, external_link=False, download=None, type=None,
40
                 name=None, value=None, title=None, rel=None, key=None, **kwargs): ...
41
```
42

43
### ButtonGroup
44

45
Container for grouping related buttons together with consistent styling.
46

47
```python { .api }
48
class ButtonGroup:
49
    """
50
    Container for grouping buttons together.
51
    
52
    Args:
53
        children: Button components to group
54
        id (str): Component identifier
55
        style (dict): Inline CSS styles
56
        class_name (str): Additional CSS classes
57
        size (str): Size for all buttons in group - "sm", "lg"
58
        vertical (bool): Stack buttons vertically instead of horizontally
59
    """
60
    def __init__(self, children=None, id=None, style=None, class_name=None,
61
                 size=None, vertical=False, **kwargs): ...
62
```
63

64
## Usage Examples
65

66
### Basic Buttons
67

68
```python
69
import dash_bootstrap_components as dbc
70
from dash import html, callback, Input, Output
71

72
# Basic button colors
73
buttons = html.Div([
74
    dbc.Button("Primary", color="primary", className="me-2"),
75
    dbc.Button("Secondary", color="secondary", className="me-2"),
76
    dbc.Button("Success", color="success", className="me-2"),
77
    dbc.Button("Info", color="info", className="me-2"),
78
    dbc.Button("Warning", color="warning", className="me-2"),
79
    dbc.Button("Danger", color="danger", className="me-2"),
80
    dbc.Button("Light", color="light", className="me-2"),
81
    dbc.Button("Dark", color="dark", className="me-2"),
82
    dbc.Button("Link", color="link"),
83
])
84
```
85

86
### Button Sizes
87

88
```python
89
# Different button sizes
90
sizes = html.Div([
91
    dbc.Button("Large", size="lg", color="primary", className="me-2"),
92
    dbc.Button("Normal", color="primary", className="me-2"),
93
    dbc.Button("Small", size="sm", color="primary"),
94
])
95
```
96

97
### Outline Buttons
98

99
```python
100
# Outline style buttons
101
outline_buttons = html.Div([
102
    dbc.Button("Primary", color="primary", outline=True, className="me-2"),
103
    dbc.Button("Secondary", color="secondary", outline=True, className="me-2"),
104
    dbc.Button("Success", color="success", outline=True, className="me-2"),
105
    dbc.Button("Danger", color="danger", outline=True, className="me-2"),
106
])
107
```
108

109
### Interactive Button with Callback
110

111
```python
112
from dash import callback, Input, Output
113

114
# Button with click counter
115
button_with_callback = html.Div([
116
    dbc.Button("Click me", id="example-button", color="primary", n_clicks=0),
117
    html.Div(id="click-output", className="mt-2"),
118
])
119

120
@callback(
121
    Output("click-output", "children"),
122
    [Input("example-button", "n_clicks")]
123
)
124
def update_click_count(n_clicks):
125
    if n_clicks:
126
        return f"Button clicked {n_clicks} times"
127
    return "Button not clicked yet"
128
```
129

130
### Button States
131

132
```python
133
# Different button states
134
states = html.Div([
135
    dbc.Button("Normal", color="primary", className="me-2"),
136
    dbc.Button("Active", color="primary", active=True, className="me-2"),
137
    dbc.Button("Disabled", color="primary", disabled=True),
138
])
139
```
140

141
### Button Groups
142

143
```python
144
# Horizontal button group
145
horizontal_group = dbc.ButtonGroup([
146
    dbc.Button("Left", color="primary"),
147
    dbc.Button("Middle", color="primary"),
148
    dbc.Button("Right", color="primary"),
149
])
150

151
# Vertical button group
152
vertical_group = dbc.ButtonGroup([
153
    dbc.Button("Top", color="secondary"),
154
    dbc.Button("Middle", color="secondary"),
155
    dbc.Button("Bottom", color="secondary"),
156
], vertical=True)
157

158
# Button group with different sizes
159
size_group = dbc.ButtonGroup([
160
    dbc.Button("Small", color="info"),
161
    dbc.Button("Group", color="info"),
162
    dbc.Button("Buttons", color="info"),
163
], size="sm")
164
```
165

166
### Link Buttons
167

168
```python
169
# Buttons as links
170
link_buttons = html.Div([
171
    dbc.Button("Internal Link", href="/page", color="primary", className="me-2"),
172
    dbc.Button("External Link", href="https://example.com", external_link=True, 
173
               color="success", className="me-2"),
174
    dbc.Button("New Tab", href="/page", target="_blank", color="info"),
175
])
176
```
177

178
### Form Buttons
179

180
```python
181
# Form submission buttons
182
form_buttons = dbc.Form([
183
    dbc.Input(placeholder="Enter text", className="mb-3"),
184
    html.Div([
185
        dbc.Button("Submit", type="submit", color="primary", className="me-2"),
186
        dbc.Button("Reset", type="reset", color="secondary", className="me-2"),
187
        dbc.Button("Cancel", type="button", color="danger", outline=True),
188
    ])
189
])
190
```
191

192
### Button with Loading State
193

194
```python
195
from dash import callback, Input, Output, State
196
import time
197

198
# Button with loading spinner
199
loading_button = html.Div([
200
    dbc.Button("Process Data", id="loading-button", color="primary", n_clicks=0),
201
    dcc.Loading(id="loading", children=[html.Div(id="loading-output")]),
202
])
203

204
@callback(
205
    [Output("loading-output", "children"), Output("loading-button", "children")],
206
    [Input("loading-button", "n_clicks")],
207
    prevent_initial_call=True
208
)
209
def process_data(n_clicks):
210
    if n_clicks:
211
        time.sleep(2)  # Simulate processing
212
        return f"Processing complete (click {n_clicks})", "Process Data"
213
    return "", "Process Data"
214
```
215

216
### Button Toolbar
217

218
```python
219
# Multiple button groups in toolbar
220
toolbar = html.Div([
221
    dbc.ButtonGroup([
222
        dbc.Button("Save", color="primary"),
223
        dbc.Button("Edit", color="secondary"),
224
        dbc.Button("Delete", color="danger"),
225
    ], className="me-2"),
226
    dbc.ButtonGroup([
227
        dbc.Button("Copy", color="info"),
228
        dbc.Button("Paste", color="info"),
229
    ], className="me-2"),
230
    dbc.ButtonGroup([
231
        dbc.Button("Undo", color="warning"),
232
        dbc.Button("Redo", color="warning"),
233
    ]),
234
], className="btn-toolbar")
235
```
236

237
### Toggle Buttons
238

239
```python
240
from dash import callback, Input, Output
241

242
# Toggle button functionality
243
toggle_button = html.Div([
244
    dbc.Button("Toggle", id="toggle-button", color="primary", active=False),
245
    html.Div(id="toggle-status", className="mt-2"),
246
])
247

248
@callback(
249
    [Output("toggle-button", "active"), Output("toggle-status", "children")],
250
    [Input("toggle-button", "n_clicks")],
251
    [State("toggle-button", "active")],
252
    prevent_initial_call=True
253
)
254
def handle_toggle(n_clicks, active):
255
    new_active = not active
256
    status = "ON" if new_active else "OFF"
257
    return new_active, f"Status: {status}"
258
```