Set of widgets for Kivy inspired by Google's Material Design
—
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.
Core button types that form the foundation of Material Design button system.
class MDRaisedButton:
"""
Material Design raised button with elevation.
Contained button with elevation shadow, used for primary actions.
"""
text: str # Button text
theme_text_color: str # Text color theme
md_bg_color: str | list # Background color
disabled: bool # Button disabled state
elevation: float # Button elevation
def on_release(self):
"""Called when button is released."""
class MDFlatButton:
"""
Material Design flat button without elevation.
Text button without background or elevation, used for secondary actions.
"""
text: str # Button text
theme_text_color: str # Text color theme
disabled: bool # Button disabled state
class MDTextButton:
"""
Simple Material Design text button.
Basic text button with minimal styling.
"""
text: str # Button text
theme_text_color: str # Text color themeButtons with outlined borders for medium emphasis actions.
class MDRectangleFlatButton:
"""
Material Design outlined rectangular button.
Button with rectangular shape and outline border.
"""
text: str # Button text
theme_text_color: str # Text color theme
line_color: str | list # Border line color
line_width: float # Border line width
class MDRectangleFlatIconButton:
"""
Material Design outlined rectangular button with icon.
Rectangular outlined button that includes both icon and text.
"""
text: str # Button text
icon: str # Icon name from md_icons
theme_text_color: str # Text color theme
theme_icon_color: str # Icon color theme
line_color: str | list # Border line color
class MDRoundFlatButton:
"""
Material Design outlined rounded button.
Button with rounded corners and outline border.
"""
text: str # Button text
theme_text_color: str # Text color theme
line_color: str | list # Border line color
radius: list # Corner radius
class MDRoundFlatIconButton:
"""
Material Design outlined rounded button with icon.
Rounded outlined button that includes both icon and text.
"""
text: str # Button text
icon: str # Icon name from md_icons
theme_text_color: str # Text color theme
theme_icon_color: str # Icon color theme
line_color: str | list # Border line color
radius: list # Corner radiusButtons with filled backgrounds for high emphasis actions.
class MDFillRoundFlatButton:
"""
Material Design filled rounded button.
Button with filled background and rounded corners.
"""
text: str # Button text
theme_text_color: str # Text color theme
md_bg_color: str | list # Background color
radius: list # Corner radius
class MDFillRoundFlatIconButton:
"""
Material Design filled rounded button with icon.
Filled rounded button that includes both icon and text.
"""
text: str # Button text
icon: str # Icon name from md_icons
theme_text_color: str # Text color theme
theme_icon_color: str # Icon color theme
md_bg_color: str | list # Background color
radius: list # Corner radiusButtons that display only icons without text.
class MDIconButton:
"""
Material Design icon-only button.
Circular button that displays only an icon, used for actions that
can be represented clearly with an icon alone.
"""
icon: str # Icon name from md_icons
theme_icon_color: str # Icon color theme
disabled: bool # Button disabled state
user_font_size: str # Icon size (e.g., "24sp")
def on_release(self):
"""Called when button is released."""Floating action buttons for primary actions that float above content.
class MDFloatingActionButton:
"""
Material Design floating action button.
Circular button that floats above content, used for the primary
action in a screen.
"""
icon: str # Icon name from md_icons
type: str # "standard" or "large"
theme_icon_color: str # Icon color theme
md_bg_color: str | list # Background color
elevation: float # Button elevation
class MDFloatingActionButtonSpeedDial:
"""
Material Design speed dial floating action button.
FAB that expands to reveal multiple related actions when pressed.
"""
data: dict # Speed dial items configuration
root_button_anim: bool # Animate root button
opening_transition: str # Opening animation type
closing_transition: str # Closing animation type
def open_stack(self):
"""Open the speed dial stack."""
def close_stack(self):
"""Close the speed dial stack."""Internal components and behaviors used by button implementations.
class BaseButton:
"""
Base button class providing common button functionality.
Foundation class for all Material Design buttons.
"""
disabled: bool # Button disabled state
def on_touch_down(self, touch):
"""Handle touch down events."""
def on_touch_up(self, touch):
"""Handle touch up events."""
class ButtonContentsIconText:
"""
Container for button contents with icon and text.
Handles layout and styling of icon and text within buttons.
"""
icon: str # Icon name
text: str # Button textfrom kivymd.uix.button import MDRaisedButton, MDFlatButton, MDIconButton
from kivymd.uix.boxlayout import MDBoxLayout
# Create layout
layout = MDBoxLayout(
orientation="vertical",
spacing="16dp",
adaptive_height=True,
pos_hint={"center_x": 0.5, "center_y": 0.5}
)
# Raised button for primary action
primary_button = MDRaisedButton(
text="Save Changes",
theme_text_color="Primary",
md_bg_color="primary",
pos_hint={"center_x": 0.5}
)
# Flat button for secondary action
secondary_button = MDFlatButton(
text="Cancel",
theme_text_color="Primary",
pos_hint={"center_x": 0.5}
)
# Icon button
icon_button = MDIconButton(
icon="heart",
theme_icon_color="Custom",
theme_bg_color="Red",
pos_hint={"center_x": 0.5}
)
layout.add_widget(primary_button)
layout.add_widget(secondary_button)
layout.add_widget(icon_button)from kivymd.uix.button import MDFloatingActionButtonSpeedDial
# Speed dial configuration
speed_dial_data = {
'language-python': 'Python',
'language-javascript': 'JavaScript',
'language-java': 'Java',
'language-swift': 'Swift',
}
# Create speed dial FAB
speed_dial = MDFloatingActionButtonSpeedDial(
data=speed_dial_data,
root_button_anim=True,
opening_transition="out_cubic",
closing_transition="out_cubic",
callback=self.callback # Function to handle item selection
)from kivymd.uix.button import MDFillRoundFlatIconButton
# Custom styled button
custom_button = MDFillRoundFlatIconButton(
text="Download",
icon="download",
theme_text_color="Custom",
text_color=[1, 1, 1, 1], # White text
theme_icon_color="Custom",
icon_color=[1, 1, 1, 1], # White icon
md_bg_color=[0.2, 0.6, 1, 1], # Blue background
radius=[20, 20, 20, 20], # Rounded corners
size_hint_x=None,
width="200dp"
)from kivymd.uix.button import MDRaisedButton
class MyApp(MDApp):
def build(self):
button = MDRaisedButton(
text="Click Me",
pos_hint={"center_x": 0.5, "center_y": 0.5}
)
button.bind(on_release=self.button_pressed)
return button
def button_pressed(self, instance):
"""Handle button press event."""
print(f"Button '{instance.text}' was pressed")
instance.text = "Pressed!"Install with Tessl CLI
npx tessl i tessl/pypi-kivymd