Kivymd Button Tutorials

By | March 7, 2022

Kivymd Button Tutorials syntax for using for buttons:

Flat Rectangle Button

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:
    
    MDRectangleFlatIconButton:
        text: "           Button           "
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        
  
 '''


class MainApp(MDApp):

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


MainApp().run()

Output:

Kivymd Button Tutorials

Floating Action Button:

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:
        
    MDFloatingActionButton:
        text: "           Button           "
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        
    
 '''


class MainApp(MDApp):

    def build(self):
        # self.theme_cls.primary_palette = "Blue"
        # self.theme_cls.theme_style = "Light"
        return Builder.load_string(KV)


MainApp().run()

Output:

KivyMD Floating Action Button

KivyMD Icon Button:

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:

    MDIconButton:
        icon: "arrow-right-circle"
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
 '''


class MainApp(MDApp):

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


MainApp().run()

Output:

MDIconButton

KivyMD Round Flat Button:

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:

    MDRoundFlatButton:
        md_bg_color:"#210070"
        text: "           Button           "
        font_style: 'Subtitle1'
        radius: [15, 15, 15, 15]
        pos_hint: {"center_x": 0.5, "center_y": 0.5}

 '''


class MainApp(MDApp):

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


MainApp().run()

Output:

MDRoundFlatButton

MD Fill Round Flat Button:

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:
    MDFillRoundFlatButton:
        text: "           Button            "
        radius: [15, 15, 15, 15]
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
    
 '''


class MainApp(MDApp):

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


MainApp().run()

Output:

MDFillRoundFlatButton

To change color of button:

MDFillRoundFlatButton:
        text: "           Button            "
        radius: [15, 15, 15, 15]
        md_bg_color:"#FE7028"
        font_style: 'Subtitle1'
        pos_hint: {"center_x": 0.5, "center_y": 0.5}

MDFillRoundFlatButton

To add icon in button, use MDFillRoundFlatIconButton from kivymd.uix.button:

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen:

    MDFillRoundFlatIconButton:
        width: 300
        md_bg_color:"#210070"
        text: "           Button            "
        icon: "arrow-right-circle"
        radius: [15, 15, 15, 15]
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
 '''


class MainApp(MDApp):

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


MainApp().run()

Output:

MDFillRoundFlatIconButton

You can use any of these icons based of your UI (User interface)

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
MDScreen: 
    MDFloatingActionButton:
        text: "           Button           "
        pos_hint: {"center_x": 0.5, "center_y": 0.7}

    MDIconButton:
        icon: "arrow-right-circle"
        pos_hint: {"center_x": 0.5, "center_y": 0.6}

    MDRoundFlatButton:
        md_bg_color:"#210070"
        text: "           Button           "
        font_style: 'Subtitle1'
        radius: [15, 15, 15, 15]
        pos_hint: {"center_x": 0.5, "center_y": 0.5}



    MDFillRoundFlatButton:
        text: "           Button            "
        radius: [15, 15, 15, 15]
        md_bg_color:"#FE7028"
        font_style: 'Subtitle1'
        pos_hint: {"center_x": 0.5, "center_y": 0.4}

    MDFillRoundFlatIconButton:
        width: 300
        md_bg_color:"#210070"
        text: "           Button            "
        icon: "arrow-right-circle"
        radius: [15, 15, 15, 15]
        pos_hint: {"center_x": 0.5, "center_y": 0.3}
 '''


class MainApp(MDApp):

    def build(self):
        # self.theme_cls.primary_palette = "Blue"
        # self.theme_cls.theme_style = "Light"
        return Builder.load_string(KV)


MainApp().run()

Output:

KivyMD Button Tutorials

Style properties can be used in buttons:

  • icon
  • text_color
  • theme_text_color
  • set_size
  • set_font_size
  • animation_label
  • hint_animation
  • bg_hint_color
  • closing_transition_button_rotation
  • root_button_anim
  • opening_transition
  • on_leave
  • on_open
  • on_close

For more information, read KivyMD Documentation.

Related posts:-