Skip to content

Button

A material button.

It supports various styles, colors, event handlers for user interaction, and can be used to display text, icons, etc.

ft.Button(content="Enabled button")
ft.Button(content="Disabled button", disabled=True)

Button

Enabled and disabled buttons

Inherits: LayoutControl, AdaptiveControl

Properties

Events

Methods

  • focus –

    Focus the button.

Examples#

Live example

Button#

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.Button(content="Enabled button"),
        ft.Button(content="Disabled button", disabled=True),
    )


if __name__ == "__main__":
    ft.run(main)

Basic button

Icons#

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.Button(content="Button with icon", icon=ft.Icons.WAVES_ROUNDED),
        ft.Button(
            content="Button with colorful icon",
            icon=ft.Icons.PARK_ROUNDED,
            icon_color=ft.Colors.GREEN_400,
        ),
    )


if __name__ == "__main__":
    ft.run(main)

Basic button

Handling clicks#

import flet as ft


def main(page: ft.Page):
    def button_clicked(e: ft.Event[ft.Button]):
        button.data += 1
        message.value = f"Button clicked {button.data} time(s)"
        page.update()

    page.add(
        button := ft.Button(
            content="Button with 'click' event",
            data=0,
            on_click=button_clicked,
        ),
        message := ft.Text(),
    )


if __name__ == "__main__":
    ft.run(main)

Handling clicks

Custom content#

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.Button(
            width=150,
            content=ft.Row(
                alignment=ft.MainAxisAlignment.SPACE_AROUND,
                controls=[
                    ft.Icon(ft.Icons.FAVORITE, color=ft.Colors.PINK),
                    ft.Icon(ft.Icons.AUDIOTRACK, color=ft.Colors.GREEN),
                    ft.Icon(ft.Icons.BEACH_ACCESS, color=ft.Colors.BLUE),
                ],
            ),
        ),
        ft.Button(
            content=ft.Container(
                padding=ft.Padding.all(10),
                content=ft.Column(
                    alignment=ft.MainAxisAlignment.CENTER,
                    spacing=5,
                    controls=[
                        ft.Text(value="Compound button", size=20),
                        ft.Text(value="This is secondary text"),
                    ],
                ),
            ),
        ),
    )


if __name__ == "__main__":
    ft.run(main)

Buttons with custom content

Shapes#

import flet as ft


def main(page: ft.Page):
    page.padding = 30
    page.spacing = 30

    page.add(
        ft.Button(
            content="Stadium",
            style=ft.ButtonStyle(shape=ft.StadiumBorder()),
        ),
        ft.Button(
            content="Rounded rectangle",
            style=ft.ButtonStyle(shape=ft.RoundedRectangleBorder(radius=10)),
        ),
        ft.Button(
            content="Continuous rectangle",
            style=ft.ButtonStyle(shape=ft.ContinuousRectangleBorder(radius=30)),
        ),
        ft.Button(
            content="Beveled rectangle",
            style=ft.ButtonStyle(shape=ft.BeveledRectangleBorder(radius=10)),
        ),
        ft.Button(
            content="Circle",
            style=ft.ButtonStyle(shape=ft.CircleBorder(), padding=30),
        ),
    )


if __name__ == "__main__":
    ft.run(main)

Buttons with different shapes

Styling#

import flet as ft


def main(page: ft.Page):
    page.add(
        ft.Button(
            content="Styled button 1",
            style=ft.ButtonStyle(
                color={
                    ft.ControlState.HOVERED: ft.Colors.WHITE,
                    ft.ControlState.FOCUSED: ft.Colors.BLUE,
                    ft.ControlState.DEFAULT: ft.Colors.BLACK,
                },
                bgcolor={
                    ft.ControlState.FOCUSED: ft.Colors.PINK_200,
                    ft.ControlState.DEFAULT: ft.Colors.YELLOW,
                },
                padding={ft.ControlState.HOVERED: 20},
                overlay_color=ft.Colors.TRANSPARENT,
                elevation={
                    ft.ControlState.DEFAULT: 0,
                    ft.ControlState.HOVERED: 5,
                    ft.ControlState.PRESSED: 10,
                },
                animation_duration=500,
                side={
                    ft.ControlState.DEFAULT: ft.BorderSide(1, color=ft.Colors.BLUE_100),
                    ft.ControlState.HOVERED: ft.BorderSide(3, color=ft.Colors.BLUE_400),
                    ft.ControlState.PRESSED: ft.BorderSide(6, color=ft.Colors.BLUE_600),
                },
                shape={
                    ft.ControlState.HOVERED: ft.RoundedRectangleBorder(radius=20),
                    ft.ControlState.DEFAULT: ft.RoundedRectangleBorder(radius=2),
                },
            ),
        )
    )


if __name__ == "__main__":
    ft.run(main)

Styled button - default state

Default state

Styled button - hovered state

Hovered state

Animate on hover#

import flet as ft


def main(page: ft.Page):
    def animate(e: ft.Event[ft.Button]):
        e.control.rotate = 0.1 if e.data else 0
        page.update()

    page.add(
        ft.Button(
            content="Hover over me, I'm animated!",
            rotate=0,
            animate_rotation=100,
            on_hover=animate,
            on_click=lambda e: page.add(ft.Text("Clicked! Try a long press!")),
            on_long_press=lambda e: page.add(ft.Text("I knew you could do it!")),
        )
    )


if __name__ == "__main__":
    ft.run(main)

Unhovered button

Normal button

Hovered button

Hovered button

Properties#

autofocus class-attribute instance-attribute #

autofocus: bool | None = None

Whether this button should be focused initially.

bgcolor class-attribute instance-attribute #

bgcolor: ColorValue | None = field(
    default=None, metadata={"skip": True}
)

The button's background color. If not specified, defaults to the theme's primary color.

clip_behavior class-attribute instance-attribute #

clip_behavior: ClipBehavior | None = None

The button's clip behavior.

color class-attribute instance-attribute #

color: ColorValue | None = field(
    default=None, metadata={"skip": True}
)

The button's foreground color. If not specified, defaults to the theme's primary color.

content class-attribute instance-attribute #

content: StrOrControl | None = None

The button's label. Typically a Text control or a string. If a string is provided, it will be wrapped in a Text control.

Raises:

elevation class-attribute instance-attribute #

elevation: Number = field(
    default=1, metadata={"skip": True}
)

The button's elevation. If not specified, defaults to 1.

icon class-attribute instance-attribute #

icon: IconDataOrControl | None = None

The icon to display inside the button. Typically an Icon control or an IconData. If an IconData is provided, it will be wrapped in an Icon control.

Raises:

icon_color class-attribute instance-attribute #

icon_color: ColorValue | None = None

The color of the icon. If not specified, defaults to the current foreground color.

style class-attribute instance-attribute #

style: ButtonStyle | None = field(
    default=None, metadata={"skip": True}
)

The button's style.

url class-attribute instance-attribute #

url: str | Url | None = None

The URL to open when the button is clicked.

Events#

on_blur class-attribute instance-attribute #

on_blur: ControlEventHandler[Button] | None = None

Called when the button loses focus.

on_click class-attribute instance-attribute #

on_click: ControlEventHandler[Button] | None = None

Called when the button is clicked.

on_focus class-attribute instance-attribute #

on_focus: ControlEventHandler[Button] | None = None

Called when the button is focused.

on_hover class-attribute instance-attribute #

on_hover: ControlEventHandler[Button] | None = None

Called when the button is hovered.

on_long_press class-attribute instance-attribute #

on_long_press: ControlEventHandler[Button] | None = None

Called when the button is long-pressed.

Methods#

focus async #

focus()

Focus the button.