CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-kivymd

Set of widgets for Kivy inspired by Google's Material Design

Pending
Overview
Eval results
Files

buttons.mddocs/

Buttons & Interactive Elements

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.

Capabilities

Standard Buttons

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 theme

Outlined Buttons

Buttons 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 radius

Filled Buttons

Buttons 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 radius

Icon Buttons

Buttons 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

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."""

Button Components and Behaviors

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 text

Usage Examples

Basic Button Usage

from 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)

Floating Action Button with Speed Dial

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
)

Button with Custom Styling

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"
)

Button Event Handling

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

docs

advanced.md

animations.md

application.md

buttons.md

dialogs.md

index.md

layouts.md

lists.md

navigation.md

text-input.md

tile.json