OutlinedButton

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren't the primary action in an app. Outlined buttons pair well with filled buttons to indicate an alternative, secondary action.

Inherits: LayoutControl, AdaptiveControl

Properties

• autofocus(bool) –

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

• clip_behavior(ClipBehavior) –

  The content will be clipped (or not) according to this option.

• content(StrOrControl | None) –

  A Control representing custom button content.

• icon(IconDataOrControl | None) –

  An icon to display in this button.

• icon_color(ColorValue | None) –

  Icon color.

• style(ButtonStyle | None) –
• url(str | Url | None) –

  The URL to open when this button is clicked.

Events

• on_blur(ControlEventHandler[OutlinedButton] | None) –

  Called when this button has lost focus.

• on_click(ControlEventHandler[OutlinedButton] | None) –

  Called when a user clicks this button.

• on_focus(ControlEventHandler[OutlinedButton] | None) –

  Called when this button has received focus.

• on_hover(ControlEventHandler[OutlinedButton] | None) –

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

• on_long_press(ControlEventHandler[OutlinedButton] | 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 = "OutlinedButton Example"

    page.add(
        ft.OutlinedButton(content="Outlined button"),
        ft.OutlinedButton(content="Disabled button", disabled=True),
    )


ft.run(main)

Handling clicks

import flet as ft


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

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

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


ft.run(main)

Icons

import flet as ft


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

    page.add(
        ft.OutlinedButton(content="Button with icon", icon="chair_outlined"),
        ft.OutlinedButton(
            content="Button with colorful icon",
            icon="park_rounded",
            icon_color="green400",
        ),
    )


ft.run(main)

Custom content

import flet as ft


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

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

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

The content will be clipped (or not) according to this option.

content

content: StrOrControl | None = None

A Control representing custom button content.

Raises:

• ValueError –

  If neither icon nor content is provided.

icon

icon: IconDataOrControl | None = None

An icon to display in this button.

icon_color

icon_color: ColorValue | None = None

Icon color.

style

style: ButtonStyle | None = None

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[OutlinedButton] | None = None

Called when this button has lost focus.

on_click

on_click: ControlEventHandler[OutlinedButton] | None = None

Called when a user clicks this button.

on_focus

on_focus: ControlEventHandler[OutlinedButton] | None = None

Called when this button has received focus.

on_hover

on_hover: ControlEventHandler[OutlinedButton] | None = None

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

data property of event object contains true (string) when cursor enters and false when it exits.

on_long_press

on_long_press: (
    ControlEventHandler[OutlinedButton] | None
) = None

Called when this button is long-pressed.

Methods

focus

focus()