Button¶

MDIconButton¶

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
Screen:

    MDIconButton:
        icon: "language-python"
        pos_hint: {"center_x": .5, "center_y": .5}
'''


class Example(MDApp):
    def build(self):
        return Builder.load_string(KV)


Example().run()

The icon parameter must have the name of the icon from kivymd/icon_definitions.py file.

You can also use custom icons:

MDIconButton:
    icon: "data/logo/kivy-icon-256.png"

By default, MDIconButton button has a size (dp(48), dp (48)). Use user_font_size attribute to resize the button:

MDIconButton:
    icon: "android"
    user_font_size: "64sp"

By default, the color of MDIconButton (depending on the style of the application) is black or white. You can change the color of MDIconButton as the text color of MDLabel:

MDIconButton:
    icon: "android"
    theme_text_color: "Custom"
    text_color: app.theme_cls.primary_color

MDFloatingActionButton¶

The above parameters for MDIconButton apply to MDFloatingActionButton.

To change MDFloatingActionButton background, use the md_bg_color parameter:

MDFloatingActionButton:
    icon: "android"
    md_bg_color: app.theme_cls.primary_color

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/md-floating-action-button-md-bg-color.png

The length of the shadow is controlled by the elevation_normal parameter:

MDFloatingActionButton:
    icon: "android"
    elevation_normal: 12

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/md-floating-action-button-elevation-normal.png

MDFlatButton¶

To change the text color of: class:~MDFlatButton use the text_color parameter:

MDFlatButton:
    text: "MDFLATBUTTON"
    text_color: 0, 0, 1, 1

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/md-flat-button-text-color.png

Or use markup:

MDFlatButton:
    text: "[color=#00ffcc]MDFLATBUTTON[/color]"
    markup: True

To specify the font size and font name, use the parameters as in the usual Kivy buttons:

MDFlatButton:
    text: "MDFLATBUTTON"
    font_size: "18sp"
    font_name: "path/to/font"

Warning

You cannot use the size_hint_x parameter for KivyMD buttons (the width of the buttons is set automatically)!

However, if there is a need to increase the width of the button, you can use the parameter increment_width:

MDFlatButton:
    text: "MDFLATBUTTON"
    increment_width: "164dp"

MDRaisedButton¶

This button is similar to the MDFlatButton button except that you can set the background color for MDRaisedButton:

MDRaisedButton:
    text: "MDRAISEDBUTTON"
    md_bg_color: 1, 0, 1, 1

MDRectangleFlatButton¶

Button parameters MDRectangleFlatButton are the same as button MDRaisedButton:

MDRectangleFlatButton:
    text: "MDRECTANGLEFLATBUTTON"
    text_color: 0, 0, 1, 1
    md_bg_color: 1, 1, 0, 1

Note

Note that the frame color will be the same as the text color.

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/md-rectangle-flat-button-md-bg-color.png

MDRectangleFlatIconButton¶

Button parameters MDRectangleFlatButton are the same as button MDRectangleFlatButton:

MDRectangleFlatIconButton:
    icon: "android"
    text: "MDRECTANGLEFLATICONBUTTON"
    width: dp(280)

Warning

MDRectangleFlatButton does not stretch to match the text and is always dp(150). But you should not set the width of the button using parameter increment_width. You should set the width instead using the width parameter.

MDRoundFlatButton¶

Button parameters MDRoundFlatButton are the same as button MDRectangleFlatButton:

MDRoundFlatButton:
    text: "MDROUNDFLATBUTTON"

Warning

The border color does not change when using text_color parameter.

MDRoundFlatButton:
    text: "MDROUNDFLATBUTTON"
    text_color: 0, 1, 0, 1

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/md-round-flat-button-text-color.png

MDRoundFlatIconButton¶

Button parameters MDRoundFlatIconButton are the same as button MDRoundFlatButton:

MDRoundFlatIconButton:
    icon: "android"
    text: "MDROUNDFLATICONBUTTON"
    width: dp(250)

Warning

The border color does not change when using text_color parameter.

Warning

MDRoundFlatIconButton does not stretch to match the text and is always dp(150). But you should not set the width of the button using parameter increment_width. You should set the width instead using the width parameter.

MDFillRoundFlatButton¶

Button parameters MDFillRoundFlatButton are the same as button MDRaisedButton.

MDFillRoundFlatIconButton¶

Button parameters MDFillRoundFlatIconButton are the same as button MDRaisedButton.

Note

Notice that the width of the MDFillRoundFlatIconButton button matches the size of the button text.

MDTextButton¶

MDTextButton:
    text: "MDTEXTBUTTON"
    custom_color: 0, 1, 0, 1

MDFloatingActionButtonSpeedDial¶

Note

See the full list of arguments in the class MDFloatingActionButtonSpeedDial.

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
Screen:

    MDFloatingActionButtonSpeedDial:
        data: app.data
        rotation_root_button: True
'''


class Example(MDApp):
    data = {
        'language-python': 'Python',
        'language-php': 'PHP',
        'language-cpp': 'C++',
    }

    def build(self):
        return Builder.load_string(KV)


Example().run()

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/MDFloatingActionButtonSpeedDial.gif

Or without KV Language:

from kivy.uix.screenmanager import Screen

from kivymd.app import MDApp
from kivymd.uix.button import MDFloatingActionButtonSpeedDial


class Example(MDApp):
    data = {
        'language-python': 'Python',
        'language-php': 'PHP',
        'language-cpp': 'C++',
    }

    def build(self):
        screen = Screen()
        speed_dial = MDFloatingActionButtonSpeedDial()
        speed_dial.data = self.data
        speed_dial.rotation_root_button = True
        screen.add_widget(speed_dial)
        return screen


Example().run()

You can use various types of animation of labels for buttons on the stack:

MDFloatingActionButtonSpeedDial:
    hint_animation: True

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/MDFloatingActionButtonSpeedDial-hint.gif

You can set your color values for background, text of buttons etc:

MDFloatingActionButtonSpeedDial:
    bg_hint_color: app.theme_cls.primary_light

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/MDFloatingActionButtonSpeedDial-hint-color.png

API - `kivymd.uix.button`¶

class kivymd.uix.button.MDIconButton¶

Bases: kivymd.uix.button.BaseRoundButton, kivymd.uix.button.BaseFlatButton, kivymd.uix.button.BasePressedButton

icon¶

Button icon.

icon is an StringProperty and defaults to ‘checkbox-blank-circle’.

class kivymd.uix.button.MDFlatButton¶: Bases: kivymd.uix.button.BaseRectangularButton, kivymd.uix.button.BaseFlatButton, kivymd.uix.button.BasePressedButton

class kivymd.uix.button.MDRaisedButton¶: Bases: kivymd.uix.button.BaseRectangularButton, kivymd.uix.behaviors.RectangularElevationBehavior, kivymd.uix.button.BaseRaisedButton, kivymd.uix.button.BasePressedButton

class kivymd.uix.button.MDFloatingActionButton¶

Bases: kivymd.uix.button.BaseRoundButton, kivymd.uix.behaviors.CircularElevationBehavior, kivymd.uix.button.BaseRaisedButton

icon¶

Button icon.

icon is an StringProperty and defaults to ‘android’.

background_palette¶

The name of the palette used for the background color of the button.

background_palette is an StringProperty and defaults to ‘Accent’.

class kivymd.uix.button.MDRectangleFlatButton¶: Bases: kivymd.uix.button.MDFlatButton

class kivymd.uix.button.MDRoundFlatButton¶

Bases: kivymd.uix.button.MDFlatButton

lay_canvas_instructions(self)¶

class kivymd.uix.button.MDTextButton¶

Bases: kivymd.theming.ThemableBehavior, kivy.uix.button.Button

custom_color¶

Custom user button color if rgba format.

custom_color is an ListProperty and defaults to [].

animation_label(self)¶

on_press(self, *args)¶

class kivymd.uix.button.MDFillRoundFlatButton¶: Bases: kivymd.uix.button.MDRoundFlatButton

class kivymd.uix.button.MDRectangleFlatIconButton¶: Bases: kivymd.uix.button.BaseFlatIconButton

class kivymd.uix.button.MDRoundFlatIconButton¶: Bases: kivymd.uix.button.MDRoundFlatButton, kivymd.uix.button.BaseFlatIconButton

class kivymd.uix.button.MDFillRoundFlatIconButton¶

Bases: kivymd.uix.button.MDFillRoundFlatButton

icon¶

Button icon.

icon is an StringProperty and defaults to ‘android’.

increment_width¶

Button extra width value.

increment_width is an NumericProperty and defaults to ‘80dp’.

class kivymd.uix.button.MDFloatingActionButtonSpeedDial(**kwargs)¶

Bases: kivymd.theming.ThemableBehavior, kivy.uix.floatlayout.FloatLayout

Events

on_open: Called when a stack is opened.
on_close: Called when a stack is closed.

icon¶

Root button icon name.

icon is a StringProperty and defaults to ‘plus’.

anchor¶

Stack anchor. Available options are: ‘right’.

anchor is a OptionProperty and defaults to ‘right’.

callback¶

Custom callback.

MDFloatingActionButtonSpeedDial:
    callback: app.callback

def callback(self, instance):
    print(instance.icon)

callback is a ObjectProperty and defaults to None.

label_text_color¶

Floating text color in rgba format.

label_text_color is a ListProperty and defaults to [0, 0, 0, 1].

data¶

Must be a dictionary

{
    'name-icon': 'Text label',
    ...,
    ...,
}

right_pad¶

If True, the button will increase on the right side by 2.5 piesels if the hint_animation parameter equal to True.

False

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/MDFloatingActionButtonSpeedDial-right-pad.gif

True

right_pad is a BooleanProperty and defaults to False.

rotation_root_button¶

If True then the root button will rotate 45 degrees when the stack is opened.

rotation_root_button is a BooleanProperty and defaults to False.

opening_transition¶

The name of the stack opening animation type.

opening_transition is a StringProperty and defaults to ‘out_cubic’.

closing_transition¶

The name of the stack closing animation type.

closing_transition is a StringProperty and defaults to ‘out_cubic’.

opening_transition_button_rotation¶

The name of the animation type to rotate the root button when opening the stack.

opening_transition_button_rotation is a StringProperty and defaults to ‘out_cubic’.

closing_transition_button_rotation¶

The name of the animation type to rotate the root button when closing the stack.

closing_transition_button_rotation is a StringProperty and defaults to ‘out_cubic’.

opening_time¶

Time required for the stack to go to: attr:state ‘open’.

opening_time is a NumericProperty and defaults to 0.2.

closing_time¶

Time required for the stack to go to: attr:state ‘close’.

closing_time is a NumericProperty and defaults to 0.2.

opening_time_button_rotation¶

Time required to rotate the root button 45 degrees during the stack opening animation.

opening_time_button_rotation is a NumericProperty and defaults to 0.2.

closing_time_button_rotation¶

Time required to rotate the root button 0 degrees during the stack closing animation.

closing_time_button_rotation is a NumericProperty and defaults to 0.2.

state¶

Indicates whether the stack is closed or open. Available options are: ‘close’, ‘open’.

state is a OptionProperty and defaults to ‘close’.

bg_color_root_button¶

Root button color in rgba format.

bg_color_root_button is a ListProperty and defaults to [].

bg_color_stack_button¶

The color of the buttons in the stack rgba format.

bg_color_stack_button is a ListProperty and defaults to [].

color_icon_stack_button¶

The color icon of the buttons in the stack rgba format.

color_icon_stack_button is a ListProperty and defaults to [].

color_icon_root_button¶

The color icon of the root button rgba format.

color_icon_root_button is a ListProperty and defaults to [].

bg_hint_color¶

Background color for the text of the buttons in the stack rgba format.

bg_hint_color is a ListProperty and defaults to [].

hint_animation¶

Whether to use button extension animation to display text labels.

hint_animation is a BooleanProperty and defaults to False.

on_open(self, *args)¶: Called when a stack is opened.

on_close(self, *args)¶: Called when a stack is closed.

on_leave(self, instance)¶: Called when the mouse cursor goes outside the button of stack.

on_enter(self, instance)¶: Called when the mouse cursor is over a button from the stack.

on_data(self, instance, value)¶: Creates a stack of buttons.

on_icon(self, instance, value)¶

on_label_text_color(self, instance, value)¶

on_color_icon_stack_button(self, instance, value)¶

on_hint_animation(self, instance, value)¶

on_bg_hint_color(self, instance, value)¶

on_color_icon_root_button(self, instance, value)¶

on_bg_color_stack_button(self, instance, value)¶

on_bg_color_root_button(self, instance, value)¶

set_pos_labels(self, widget)¶: Sets the position of the floating labels.

set_pos_root_button(self, instance)¶: Sets the position of the root button.

set_pos_bottom_buttons(self, instance)¶: Sets the position of the bottom buttons in a stack.

open_stack(self, instance)¶: Opens a button stack.

do_animation_open_stack(self, anim_data)¶

close_stack(self)¶: Closes the button stack.

Button¶

MDIconButton¶

MDFloatingActionButton¶

MDFlatButton¶

MDRaisedButton¶

MDRectangleFlatButton¶

MDRectangleFlatIconButton¶

MDRoundFlatButton¶

MDRoundFlatIconButton¶

MDFillRoundFlatButton¶

MDFillRoundFlatIconButton¶

MDTextButton¶

MDFloatingActionButtonSpeedDial¶

API - kivymd.uix.button¶

API - `kivymd.uix.button`¶