0
# Buttons & Interactive Elements
1
2
Complete set of Material Design buttons and interactive elements including raised buttons, flat buttons, icon buttons, floating action buttons, and specialized interactive components. All button components follow Material Design specifications for sizing, spacing, elevation, and interaction states.
3
4
## Capabilities
5
6
### Standard Buttons
7
8
Core button types that form the foundation of Material Design button system.
9
10
```python { .api }
11
class MDRaisedButton:
12
"""
13
Material Design raised button with elevation.
14
15
Contained button with elevation shadow, used for primary actions.
16
"""
17
text: str # Button text
18
theme_text_color: str # Text color theme
19
md_bg_color: str | list # Background color
20
disabled: bool # Button disabled state
21
elevation: float # Button elevation
22
23
def on_release(self):
24
"""Called when button is released."""
25
26
class MDFlatButton:
27
"""
28
Material Design flat button without elevation.
29
30
Text button without background or elevation, used for secondary actions.
31
"""
32
text: str # Button text
33
theme_text_color: str # Text color theme
34
disabled: bool # Button disabled state
35
36
class MDTextButton:
37
"""
38
Simple Material Design text button.
39
40
Basic text button with minimal styling.
41
"""
42
text: str # Button text
43
theme_text_color: str # Text color theme
44
```
45
46
### Outlined Buttons
47
48
Buttons with outlined borders for medium emphasis actions.
49
50
```python { .api }
51
class MDRectangleFlatButton:
52
"""
53
Material Design outlined rectangular button.
54
55
Button with rectangular shape and outline border.
56
"""
57
text: str # Button text
58
theme_text_color: str # Text color theme
59
line_color: str | list # Border line color
60
line_width: float # Border line width
61
62
class MDRectangleFlatIconButton:
63
"""
64
Material Design outlined rectangular button with icon.
65
66
Rectangular outlined button that includes both icon and text.
67
"""
68
text: str # Button text
69
icon: str # Icon name from md_icons
70
theme_text_color: str # Text color theme
71
theme_icon_color: str # Icon color theme
72
line_color: str | list # Border line color
73
74
class MDRoundFlatButton:
75
"""
76
Material Design outlined rounded button.
77
78
Button with rounded corners and outline border.
79
"""
80
text: str # Button text
81
theme_text_color: str # Text color theme
82
line_color: str | list # Border line color
83
radius: list # Corner radius
84
85
class MDRoundFlatIconButton:
86
"""
87
Material Design outlined rounded button with icon.
88
89
Rounded outlined button that includes both icon and text.
90
"""
91
text: str # Button text
92
icon: str # Icon name from md_icons
93
theme_text_color: str # Text color theme
94
theme_icon_color: str # Icon color theme
95
line_color: str | list # Border line color
96
radius: list # Corner radius
97
```
98
99
### Filled Buttons
100
101
Buttons with filled backgrounds for high emphasis actions.
102
103
```python { .api }
104
class MDFillRoundFlatButton:
105
"""
106
Material Design filled rounded button.
107
108
Button with filled background and rounded corners.
109
"""
110
text: str # Button text
111
theme_text_color: str # Text color theme
112
md_bg_color: str | list # Background color
113
radius: list # Corner radius
114
115
class MDFillRoundFlatIconButton:
116
"""
117
Material Design filled rounded button with icon.
118
119
Filled rounded button that includes both icon and text.
120
"""
121
text: str # Button text
122
icon: str # Icon name from md_icons
123
theme_text_color: str # Text color theme
124
theme_icon_color: str # Icon color theme
125
md_bg_color: str | list # Background color
126
radius: list # Corner radius
127
```
128
129
### Icon Buttons
130
131
Buttons that display only icons without text.
132
133
```python { .api }
134
class MDIconButton:
135
"""
136
Material Design icon-only button.
137
138
Circular button that displays only an icon, used for actions that
139
can be represented clearly with an icon alone.
140
"""
141
icon: str # Icon name from md_icons
142
theme_icon_color: str # Icon color theme
143
disabled: bool # Button disabled state
144
user_font_size: str # Icon size (e.g., "24sp")
145
146
def on_release(self):
147
"""Called when button is released."""
148
```
149
150
### Floating Action Buttons
151
152
Floating action buttons for primary actions that float above content.
153
154
```python { .api }
155
class MDFloatingActionButton:
156
"""
157
Material Design floating action button.
158
159
Circular button that floats above content, used for the primary
160
action in a screen.
161
"""
162
icon: str # Icon name from md_icons
163
type: str # "standard" or "large"
164
theme_icon_color: str # Icon color theme
165
md_bg_color: str | list # Background color
166
elevation: float # Button elevation
167
168
class MDFloatingActionButtonSpeedDial:
169
"""
170
Material Design speed dial floating action button.
171
172
FAB that expands to reveal multiple related actions when pressed.
173
"""
174
data: dict # Speed dial items configuration
175
root_button_anim: bool # Animate root button
176
opening_transition: str # Opening animation type
177
closing_transition: str # Closing animation type
178
179
def open_stack(self):
180
"""Open the speed dial stack."""
181
182
def close_stack(self):
183
"""Close the speed dial stack."""
184
```
185
186
### Button Components and Behaviors
187
188
Internal components and behaviors used by button implementations.
189
190
```python { .api }
191
class BaseButton:
192
"""
193
Base button class providing common button functionality.
194
195
Foundation class for all Material Design buttons.
196
"""
197
disabled: bool # Button disabled state
198
199
def on_touch_down(self, touch):
200
"""Handle touch down events."""
201
202
def on_touch_up(self, touch):
203
"""Handle touch up events."""
204
205
class ButtonContentsIconText:
206
"""
207
Container for button contents with icon and text.
208
209
Handles layout and styling of icon and text within buttons.
210
"""
211
icon: str # Icon name
212
text: str # Button text
213
```
214
215
## Usage Examples
216
217
### Basic Button Usage
218
219
```python
220
from kivymd.uix.button import MDRaisedButton, MDFlatButton, MDIconButton
221
from kivymd.uix.boxlayout import MDBoxLayout
222
223
# Create layout
224
layout = MDBoxLayout(
225
orientation="vertical",
226
spacing="16dp",
227
adaptive_height=True,
228
pos_hint={"center_x": 0.5, "center_y": 0.5}
229
)
230
231
# Raised button for primary action
232
primary_button = MDRaisedButton(
233
text="Save Changes",
234
theme_text_color="Primary",
235
md_bg_color="primary",
236
pos_hint={"center_x": 0.5}
237
)
238
239
# Flat button for secondary action
240
secondary_button = MDFlatButton(
241
text="Cancel",
242
theme_text_color="Primary",
243
pos_hint={"center_x": 0.5}
244
)
245
246
# Icon button
247
icon_button = MDIconButton(
248
icon="heart",
249
theme_icon_color="Custom",
250
theme_bg_color="Red",
251
pos_hint={"center_x": 0.5}
252
)
253
254
layout.add_widget(primary_button)
255
layout.add_widget(secondary_button)
256
layout.add_widget(icon_button)
257
```
258
259
### Floating Action Button with Speed Dial
260
261
```python
262
from kivymd.uix.button import MDFloatingActionButtonSpeedDial
263
264
# Speed dial configuration
265
speed_dial_data = {
266
'language-python': 'Python',
267
'language-javascript': 'JavaScript',
268
'language-java': 'Java',
269
'language-swift': 'Swift',
270
}
271
272
# Create speed dial FAB
273
speed_dial = MDFloatingActionButtonSpeedDial(
274
data=speed_dial_data,
275
root_button_anim=True,
276
opening_transition="out_cubic",
277
closing_transition="out_cubic",
278
callback=self.callback # Function to handle item selection
279
)
280
```
281
282
### Button with Custom Styling
283
284
```python
285
from kivymd.uix.button import MDFillRoundFlatIconButton
286
287
# Custom styled button
288
custom_button = MDFillRoundFlatIconButton(
289
text="Download",
290
icon="download",
291
theme_text_color="Custom",
292
text_color=[1, 1, 1, 1], # White text
293
theme_icon_color="Custom",
294
icon_color=[1, 1, 1, 1], # White icon
295
md_bg_color=[0.2, 0.6, 1, 1], # Blue background
296
radius=[20, 20, 20, 20], # Rounded corners
297
size_hint_x=None,
298
width="200dp"
299
)
300
```
301
302
### Button Event Handling
303
304
```python
305
from kivymd.uix.button import MDRaisedButton
306
307
class MyApp(MDApp):
308
def build(self):
309
button = MDRaisedButton(
310
text="Click Me",
311
pos_hint={"center_x": 0.5, "center_y": 0.5}
312
)
313
button.bind(on_release=self.button_pressed)
314
return button
315
316
def button_pressed(self, instance):
317
"""Handle button press event."""
318
print(f"Button '{instance.text}' was pressed")
319
instance.text = "Pressed!"
320
```