Skip to content

TextButton

Text buttons are used for the lowest priority actions, especially when presenting multiple options. Text buttons can be placed on a variety of backgrounds. Until the button is interacted with, its container isn’t visible.

Inherits: LayoutControl, AdaptiveControl

Properties

Events

Methods

Examples#

Live example

Basic Example#

import flet as ft


def main(page: ft.Page):
    page.title = "Basic text buttons"

    page.add(
        ft.TextButton(content="Text button"),
        ft.TextButton(content="Disabled button", disabled=True),
    )


ft.run(main)

basic

Icons#

import flet as ft


def main(page: ft.Page):
    page.title = "TextButtons with icons"

    page.add(
        ft.TextButton(content="Button with icon", icon=ft.Icons.WAVES_OUTLINED),
        ft.TextButton(
            content="Button with colorful icon",
            icon=ft.Icons.PARK_ROUNDED,
            icon_color=ft.Colors.GREEN_400,
        ),
    )


ft.run(main)

icons

Handling clicks#

import flet as ft


def main(page: ft.Page):
    page.title = "TextButton with 'click' event"

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

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


ft.run(main)

handling-clicks

Custom content#

import flet as ft


def main(page: ft.Page):
    page.title = "TextButtons with custom content"

    page.add(
        ft.TextButton(
            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.TextButton(
            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)

custom-content

Properties#

autofocus #

autofocus: bool = False

True if the control will be selected as the initial focus.

If there is more than one control on a page with autofocus set, then the first one added to the page will get focus.

clip_behavior #

clip_behavior: ClipBehavior = NONE

Defines how the content of this button is clipped.

content #

content: StrOrControl | None = None

A Control representing custom button content.

icon #

icon: IconDataOrControl | None = None

An icon to show in this button.

icon_color #

icon_color: ColorValue | None = None

Icon color.

style #

style: ButtonStyle | None = None

Defines the style of this button.

url #

url: str | Url | None = None

The URL to open when this button is clicked.

Additionally, if on_click event callback is provided, it is fired after that.

Events#

on_blur #

on_blur: ControlEventHandler[TextButton] | None = None

Called when this button has lost focus.

on_click #

on_click: ControlEventHandler[TextButton] | None = None

Called when a user clicks this button.

on_focus #

on_focus: ControlEventHandler[TextButton] | None = None

Called when this button has received focus.

on_hover #

on_hover: ControlEventHandler[TextButton] | None = None

Called when a mouse pointer enters or exists this button's response area.

The data property of event object is True when cursor enters and False when it exits.

on_long_press #

on_long_press: ControlEventHandler[TextButton] | None = None

Called when this button is long-pressed.

Methods#

focus #

focus()