Skip to content

IconButton

An icon button is a round button with an icon in the middle that reacts to touches by filling with color (ink).

Icon buttons are commonly used in the toolbars, but they can be used in many other places as well.

ft.IconButton(icon=ft.Icons.FAVORITE, icon_color=ft.Colors.PRIMARY)

IconButton

Basic IconButton

Inherits: LayoutControl, AdaptiveControl

Properties

Events

Methods

  • focus –

    Moves focus to this button.

Examples#

Live example

Handling clicks#

import flet as ft


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

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

    page.add(
        button := ft.IconButton(
            icon=ft.Icons.PLAY_CIRCLE_FILL_OUTLINED,
            data=0,
            on_click=button_clicked,
        ),
        message := ft.Text(),
    )


ft.run(main)

handling-clicks

Selected icon#

import flet as ft


def main(page: ft.Page):
    page.title = "IconButton Example"
    page.padding = 10
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    def handle_click(e: ft.Event[ft.IconButton]):
        e.control.selected = not e.control.selected
        e.control.update()

    page.add(
        ft.IconButton(
            icon=ft.Icons.BATTERY_1_BAR,
            selected_icon=ft.Icons.BATTERY_FULL,
            scale=5,
            on_click=handle_click,
            selected=False,
            style=ft.ButtonStyle(
                color={
                    ft.ControlState.SELECTED: ft.Colors.GREEN,
                    ft.ControlState.DEFAULT: ft.Colors.RED,
                }
            ),
        )
    )


ft.run(main)

Properties#

alignment #

alignment: Alignment | None = None

Defines how the icon is positioned within this button.

Defaults to Alignment.CENTER.

autofocus #

autofocus: bool = False

Whether this control will be provided 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.

bgcolor #

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

The background color of this button.

disabled_color #

disabled_color: ColorValue | None = None

The color to use for the icon inside the button when disabled.

enable_feedback #

enable_feedback: bool | None = None

Whether detected gestures should provide acoustic and/or haptic feedback. On Android, for example, setting this to True produce a click sound and a long-press will produce a short vibration.

focus_color #

focus_color: ColorValue | None = None

The color of this button when in focus.

highlight_color #

highlight_color: ColorValue | None = None

The color of this button when it is pressed. The highlight fades in quickly as this button is pressed/held down.

hover_color #

hover_color: ColorValue | None = None

The color of this button when hovered.

icon #

icon: IconDataOrControl | None = None

An icon to be shown in this button.

icon_color #

icon_color: ColorValue | None = None

The foreground color of the icon.

icon_size #

icon_size: Number | None = None

The icon's size in virtual pixels.

Defaults to 24.

mouse_cursor #

mouse_cursor: MouseCursor | None = field(
    default=None, metadata={"skip": True}
)

The cursor to be displayed when a mouse pointer enters or is hovering over this control.

padding #

padding: PaddingValue | None = None

Defines the padding around this button. The entire padded icon will react to input gestures.

Defaults to Padding.all(8).

selected #

selected: bool | None = None

The optional selection state of this button.

If this property is not set, the button will behave as a normal push button, otherwise, the button will toggle between showing icon (when False), and selected_icon (when True).

selected_icon #

selected_icon: IconDataOrControl | None = None

The icon to be shown in this button for the 'selected' state.

selected_icon_color #

selected_icon_color: ColorValue | None = None

The icon color for the 'selected' state of this button.

size_constraints #

size_constraints: BoxConstraints | None = None

Size constraints for this button.

splash_color #

splash_color: ColorValue | None = None

The primary color of this button when it is in the pressed state.

splash_radius #

splash_radius: Number | None = None

The splash radius.

Note

This value is honoured only when in Material 2 (Theme.use_material3 is False).

Raises:

style #

style: ButtonStyle | None = None

Customizes this button's appearance.

Note

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.

visual_density #

visual_density: VisualDensity | None = field(
    default=None, metadata={"skip": True}
)

Defines how compact this button's layout will be.

Events#

on_blur #

on_blur: ControlEventHandler[IconButton] | None = None

Called when this button has lost focus.

on_click #

on_click: ControlEventHandler[IconButton] | None = None

Called when a user clicks this button.

on_focus #

on_focus: ControlEventHandler[IconButton] | None = None

Called when this button has received focus.

Methods#

focus #

focus()

Moves focus to this button.