Button

See also

Material Design spec, Buttons

Material Design spec, Buttons: floating action button

Buttons allow users to take actions, and make choices, with a single tap.

KivyMD provides the following button classes for use:

• MDIconButton

• MDFloatingActionButton

• MDFlatButton

• MDRaisedButton

• MDRectangleFlatButton

• MDRectangleFlatIconButton

• MDRoundFlatButton

• MDRoundFlatIconButton

• MDFillRoundFlatButton

• MDFillRoundFlatIconButton

• MDTextButton

• MDFloatingActionButtonSpeedDial

MDIconButton

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
MDScreen:

    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

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

MDFloatingActionButton:
    icon: "android"
    elevation_normal: 12

MDFlatButton

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

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

Or use markup:

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

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"

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

MDRectangleFlatButton:
    text: "MDRECTANGLEFLATBUTTON"
    theme_text_color: "Custom"
    text_color: 1, 0, 0, 1
    line_color: 0, 0, 1, 1

MDRectangleFlatIconButton

Button parameters MDRectangleFlatButton are the same as button MDRectangleFlatButton:

MDRectangleFlatIconButton:
    icon: "android"
    text: "MDRECTANGLEFLATICONBUTTON"
    theme_text_color: "Custom"
    text_color: 0, 0, 1, 1
    line_color: 1, 0, 1, 1
    icon_color: 1, 0, 0, 1

Without border

from kivymd.app import MDApp
from kivymd.uix.screen import MDScreen
from kivymd.uix.button import MDRectangleFlatIconButton


class Example(MDApp):
    def build(self):
        screen = MDScreen()
        screen.add_widget(
            MDRectangleFlatIconButton(
                text="MDRectangleFlatIconButton",
                icon="language-python",
                line_color=(0, 0, 0, 0),
                pos_hint={"center_x": .5, "center_y": .5},
            )
        )
        return screen


Example().run()

MDRectangleFlatIconButton:
    text: "MDRectangleFlatIconButton"
    icon: "language-python"
    line_color: 0, 0, 0, 0
    pos_hint: {"center_x": .5, "center_y": .5}

MDRoundFlatButton

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

MDRoundFlatIconButton

Button parameters MDRoundFlatIconButton are the same as button MDRoundFlatButton:

MDRoundFlatIconButton:
    icon: "android"
    text: "MDROUNDFLATICONBUTTON"

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 = '''
MDScreen:

    MDFloatingActionButtonSpeedDial:
        data: app.data
        root_button_anim: True
'''


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

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


Example().run()

Or without KV Language:

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


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

    def build(self):
        screen = MDScreen()
        speed_dial = MDFloatingActionButtonSpeedDial()
        speed_dial.data = self.data
        speed_dial.root_button_anim = 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

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

MDFloatingActionButtonSpeedDial:
    bg_hint_color: app.theme_cls.primary_light

See also

See full example

API - kivymd.uix.button

class kivymd.uix.button.MDRaisedButton(**kwargs)

Base class for all rectangular buttons.

theme_text_color

update_text_color(self, *args)

class kivymd.uix.button.MDFlatButton(**kwargs)

Base class for all rectangular buttons.

md_bg_color

class kivymd.uix.button.MDRectangleFlatButton(**kwargs)

Base class for all rectangular buttons.

class kivymd.uix.button.MDRectangleFlatIconButton(**kwargs)

Base class for all rectangular buttons.

icon

Button icon.

icon is an StringProperty and defaults to ‘android’.

icon_color

Button icon color.

icon_color is an ColorProperty and defaults to None.

update_md_bg_color(self, instance, value)

Called when the application color palette changes.

set_icon_color(self, interval)

Sets the icon color if no custom value is specified.

remove_label(self, interval)

class kivymd.uix.button.MDRoundFlatButton(**kwargs)

Base class for all rectangular buttons.

line_width

Line width for button border.

line_width is an NumericProperty and defaults to 1.

line_color

Line color for button border.

line_color is an ColorProperty and defaults to None.

lay_canvas_instructions(self)

class kivymd.uix.button.MDRoundFlatIconButton(**kwargs)

Base class for all rectangular buttons.

icon

Button icon.

icon is an StringProperty and defaults to ‘android’.

icon_color

Button icon color.

icon_color is an ColorProperty and defaults to None.

set_icon_color(self, interval)

Sets the icon color if no custom value is specified.

update_md_bg_color(self, instance, value)

Called when the application color palette changes.

on_icon_color(self, instance, value)

remove_label(self, interval)

class kivymd.uix.button.MDFillRoundFlatButton(**kwargs)

Base class for all rectangular buttons.

opposite_colors

set_text_color(self, interval)

Sets the text color if no custom value is specified.

update_md_bg_color(self, instance, value)

Called when the application color palette changes.

on_md_bg_color(self, instance, value)

We override this method, thus prohibiting setting the background color for the button.

Allows to set the background color only in the rangefrom [0.0, 0.0, 0.0, 0.0] to [0.0, 0.0, 0.0, 0.1]. This color is set in the BasePressedButton class when the button is pressed and Ignore other custom colors.

class kivymd.uix.button.MDFillRoundFlatIconButton(**kwargs)

Base class for all rectangular buttons.

set_md_bg_color(self, interval)

Checks if a value is set for the md_bg_color parameter.

on_md_bg_color(self, instance, value)

We override this method, thus prohibiting setting the background color for the button.

Allows to set the background color only in the rangefrom [0.0, 0.0, 0.0, 0.0] to [0.0, 0.0, 0.0, 0.1]. This color is set in the BasePressedButton class when the button is pressed and Ignore other custom colors.

update_md_bg_color(self, instance, value)

Called when the application color palette changes.

update_text_color(self, *args)

set_text_color(self, interval)

Sets the text color if no custom value is specified.

update_icon_color(self, interval)

on_disabled(self, instance, value)

This function hides the shadow when the widget is disabled. It sets the shadow to 0.

set_icon_color(self, interval)

Sets the icon color if no custom value is specified.

class kivymd.uix.button.MDIconButton(**kwargs)

Base class for all round buttons, bringing in the appropriate on-touch behavior

icon

Button icon.

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

set_size(self, interval)

Sets the custom icon size if the value of the user_font_size attribute is not zero. Otherwise, the icon size is set to (48, 48).

update_md_bg_color(self, instance, value)

Called when the application color palette changes.

class kivymd.uix.button.MDFloatingActionButton(**kwargs)

Base class for all round buttons, bringing in the appropriate on-touch behavior

icon

Button icon.

icon is an StringProperty and defaults to ‘android’.

update_text_color(self, *args)

set_md_bg_color(self, interval)

Checks if a value is set for the md_bg_color parameter.

set_size(self, interval)

on_touch_down(self, touch)

Receive a touch down event.

Parameters

touch: MotionEvent class

Touch received. The touch is in parent coordinates. See relativelayout for a discussion on coordinate systems.

Returns

bool If True, the dispatching of the touch event will stop. If False, the event will continue to be dispatched to the rest of the widget tree.

on_touch_move(self, touch)

Receive a touch move event. The touch is in parent coordinates.

See on_touch_down() for more information.

on_touch_up(self, touch)

Receive a touch up event. The touch is in parent coordinates.

See on_touch_down() for more information.

class kivymd.uix.button.MDTextButton(**kwargs)

This mixin class provides Button behavior. Please see the button behaviors module documentation for more information.

Events

on_press

Fired when the button is pressed.

on_release

Fired when the button is released (i.e. the touch/click that pressed the button goes away).

color

Button color in (r, g, b, a) format.

color is an ColorProperty and defaults to None.

color_disabled

Button color disabled in (r, g, b, a) format.

color_disabled is an ColorProperty and defaults to None.

animation_label(self)

on_press(self, *args)

on_md_bg_color(self, instance, value)

on_disabled(self, instance, value)

This function hides the shadow when the widget is disabled. It sets the shadow to 0.

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

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 (r, g, b, a) format.

label_text_color is a ColorProperty 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 pixels if the hint_animation parameter equal to True.

False

True

right_pad is a BooleanProperty and defaults to False.

root_button_anim

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

root_button_anim 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 (r, g, b, a) format.

bg_color_root_button is a ColorProperty and defaults to [].

bg_color_stack_button

The color of the buttons in the stack (r, g, b, a) format.

bg_color_stack_button is a ColorProperty and defaults to [].

color_icon_stack_button

The color icon of the buttons in the stack (r, g, b, a) format.

color_icon_stack_button is a ColorProperty and defaults to [].

color_icon_root_button

The color icon of the root button (r, g, b, a) format.

color_icon_root_button is a ColorProperty and defaults to [].

bg_hint_color

Background color for the text of the buttons in the stack (r, g, b, a) format.

bg_hint_color is a ColorProperty and defaults to None.

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.