Button

Examples

Live example

Basic Example

import flet as ft


def main(page: ft.Page):
    page.title = "Button Example"

    page.add(
        ft.Button(content="Elevated button"),
        ft.Button(content="Disabled button", disabled=True),
    )


ft.run(main)

Icons

import flet as ft


def main(page: ft.Page):
    page.title = "Button Example"

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


ft.run(main)

Handling clicks

import flet as ft


def main(page: ft.Page):
    page.title = "Button Example"
    page.theme_mode = ft.ThemeMode.LIGHT

    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(),
    )


ft.run(main)

Custom content

import flet as ft


def main(page: ft.Page):
    page.title = "Button Example"

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


ft.run(main)

Shapes

Styling

import flet as ft


def main(page: ft.Page):
    page.padding = 50
    page.theme_mode = ft.ThemeMode.LIGHT

    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),
                },
            ),
        )
    )


ft.run(main)

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


ft.run(main)

Button

Bases: LayoutControl, AdaptiveControl

A customizable button control that can display text, icons, or both.

It supports various styles, colors, and event handlers for user interaction.

autofocus

autofocus: bool | None = None

bgcolor

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

clip_behavior

clip_behavior: ClipBehavior | None = None

color

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

content

content: StrOrControl | None = None

elevation

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

icon

icon: IconDataOrControl | None = None

icon_color

icon_color: ColorValue | None = None

on_blur

on_blur: ControlEventHandler[Button] | None = None

on_click

on_click: ControlEventHandler[Button] | None = None

on_focus

on_focus: ControlEventHandler[Button] | None = None

on_hover

on_hover: ControlEventHandler[Button] | None = None

on_long_press

on_long_press: ControlEventHandler[Button] | None = None

style

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

url

url: str | Url | None = None

before_update

before_update()

focus

focus()