Skip to main 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.

Examples

Live example

Icon buttons

import flet as ft


def main(page: ft.Page):
page.title = "Icon buttons"
page.add(
ft.Row(
[
ft.IconButton(
icon=ft.icons.PAUSE_CIRCLE_FILLED_ROUNDED,
icon_color="blue400",
icon_size=20,
tooltip="Pause record",
),
ft.IconButton(
icon=ft.icons.DELETE_FOREVER_ROUNDED,
icon_color="pink600",
icon_size=40,
tooltip="Delete record",
),
]
),
)


ft.app(target=main)

Icon button with click event

import flet as ft


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

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

b = ft.IconButton(
icon=ft.icons.PLAY_CIRCLE_FILL_OUTLINED, on_click=button_clicked, data=0
)
t = ft.Text()

page.add(b, t)

ft.app(target=main)

Properties

adaptive

If the value is True, an adaptive button is created based on whether the target platform is iOS/macOS.

On iOS and macOS, a CupertinoButton is created, which matches the functionality and presentation of this button. On other platforms, a Material IconButton is created.

The default value is False.

alignment

Defines how the icon is positioned within the IconButton. Defaults to alignment.center.

See Container.alignment for more information and possible values.

autofocus

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.

content

A Control representing custom button content.

disabled_color

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

enable_feedback

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.

Defaults to True.

focus_color

The button's color when in focus.

highlight_color

The button's color when the button is pressed. The highlight fades in quickly as the button is held down.

hover_color

The button's color when hovered.

icon

Icon shown in the button.

icon_color

Icon color.

icon_size

Icon size in virtual pixels.

mouse_cursor

The cursor to be displayed when a mouse pointer enters or is hovering over this control. See MouseCursor for possible values.

padding

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

Default value is padding.all(8). See Container.padding for more information and possible values.

selected

Turns icon button to a toggle button: True - the button is in selected state, False - in normal.

selected_icon

Icon shown in the button in selected state.

selected_icon_color

Icon color for the selected state.

En example of icon toggle button:

import flet as ft

def main(page: ft.Page):

def toggle_icon_button(e):
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,
on_click=toggle_icon_button,
selected=False,
style=ft.ButtonStyle(color={"selected": ft.colors.GREEN, "": ft.colors.RED}),
)
)

ft.app(target=main)

splash_color

The primary color of the button when the button is in the down (pressed) state.

splash_radius

The splash radius. Honoured only when in Material 2.

style

See ElevatedButton.style for more information about this property.

tooltip

The text displayed when hovering the mouse over the button.

url

The URL to open when the button is clicked. If registered, on_click event is fired after that.

url_target

Where to open URL in the web mode. See Container.url_target for possible values.

visual_density

Defines how compact the control's layout will be. Value is of ThemeVisualDensity enum: STANDARD, COMPACT, COMFORTABLE, ADAPTIVE_PLATFORM_DENSITY.

Methods

focus()

Moves focus to a button.

Events

on_blur

Fires when the control has lost focus.

on_click

Fires when a user clicks the button.

on_focus

Fires when the control has received focus.