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

• autofocus(bool) –

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

• clip_behavior(ClipBehavior) –

  Defines how the content of this button is clipped.

• content(StrOrControl | None) –

  A Control representing custom button content.

• icon(IconDataOrControl | None) –

  An icon to show in this button.

• icon_color(ColorValue | None) –

  Icon color.

• style(ButtonStyle | None) –

  Defines the style of this button.

• url(str | Url | None) –

  The URL to open when this button is clicked.

Events

• on_blur(ControlEventHandler[TextButton] | None) –

  Called when this button has lost focus.

• on_click(ControlEventHandler[TextButton] | None) –

  Called when a user clicks this button.

• on_focus(ControlEventHandler[TextButton] | None) –

  Called when this button has received focus.

• on_hover(ControlEventHandler[TextButton] | None) –

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

• on_long_press(ControlEventHandler[TextButton] | None) –

  Called when this button is long-pressed.

Methods

• focus –

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)

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)

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)

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)

Properties

autofocus class-attribute instance-attribute

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 class-attribute instance-attribute

clip_behavior: ClipBehavior = NONE

Defines how the content of this button is clipped.

content class-attribute instance-attribute

content: StrOrControl | None = None

A Control representing custom button content.

icon class-attribute instance-attribute

icon: IconDataOrControl | None = None

An icon to show in this button.

icon_color class-attribute instance-attribute

icon_color: ColorValue | None = None

Icon color.

style class-attribute instance-attribute

style: ButtonStyle | None = None

Defines the style of this button.

url class-attribute instance-attribute

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 class-attribute instance-attribute

on_blur: ControlEventHandler[TextButton] | None = None

Called when this button has lost focus.

on_click class-attribute instance-attribute

on_click: ControlEventHandler[TextButton] | None = None

Called when a user clicks this button.

on_focus class-attribute instance-attribute

on_focus: ControlEventHandler[TextButton] | None = None

Called when this button has received focus.

on_hover class-attribute instance-attribute

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 class-attribute instance-attribute

on_long_press: ControlEventHandler[TextButton] | None = None

Called when this button is long-pressed.

Methods

focus async

focus()