Skip to main content

IconButton

A Shadcn button that shows only an icon.

Example:

shad.IconButton(
    icon=shad.LucideIcons.ROCKET,
    on_click=lambda e: print("launched"),
)
IconButton
IconButton

Inherits: LayoutControl

Properties

  • autofocus - Whether this button should be focused on initial display.
  • bgcolor - The background color.
  • color - The icon color.
  • hover_bgcolor - The background color while the pointer hovers over this button.
  • hover_color - The icon color while the pointer hovers over this button.
  • icon - The icon to show.
  • icon_size - The size of icon.
  • variant - The visual variant of this button.

Events

  • on_blur - Called when this button loses focus.
  • on_click - Called when this button is clicked.
  • on_focus - Called when this button receives focus.
  • on_hover - Called when the pointer enters or exits this button.
  • on_long_press - Called when this button is long-pressed.

Methods

  • focus - Requests focus for this button.

Example​

Shadcn IconButton​

play_arrowTry Online
import flet_shadcn_ui as shad

import flet as ft


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

    def handle_click(e: ft.Event[shad.IconButton]):
        message.value = f"Clicked: {e.control.data}"

    message = ft.Text("Click a button")

    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.Row(
                        controls=[
                            shad.IconButton(
                                icon=shad.LucideIcons.ROCKET,
                                data="Primary",
                                on_click=handle_click,
                            ),
                            shad.IconButton(
                                icon=shad.LucideIcons.TRASH_2,
                                variant=shad.ButtonVariant.DESTRUCTIVE,
                                data="Destructive",
                                on_click=handle_click,
                            ),
                            shad.IconButton(
                                icon=shad.LucideIcons.SETTINGS,
                                variant=shad.ButtonVariant.OUTLINE,
                                data="Outline",
                                on_click=handle_click,
                            ),
                            shad.IconButton(
                                icon=shad.LucideIcons.COPY,
                                variant=shad.ButtonVariant.SECONDARY,
                                data="Secondary",
                                on_click=handle_click,
                            ),
                            shad.IconButton(
                                icon=shad.LucideIcons.HEART,
                                variant=shad.ButtonVariant.GHOST,
                                data="Ghost",
                                on_click=handle_click,
                            ),
                        ],
                    ),
                    message,
                ],
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
icon-button
After clicking the outline button

Properties​

autofocusclass-attributeinstance-attribute​

autofocus: bool = False

Whether this button should be focused on initial display.

bgcolorclass-attributeinstance-attribute​

bgcolor: ColorValue | None = None

The background color.

If None, the color is taken from variant.

colorclass-attributeinstance-attribute​

color: ColorValue | None = None

The icon color.

If None, the color is taken from variant.

hover_bgcolorclass-attributeinstance-attribute​

hover_bgcolor: ColorValue | None = None

The background color while the pointer hovers over this button.

hover_colorclass-attributeinstance-attribute​

hover_color: ColorValue | None = None

The icon color while the pointer hovers over this button.

iconinstance-attribute​

icon: IconDataOrControl

The icon to show.

icon_sizeclass-attributeinstance-attribute​

icon_size: Number | None = None

The size of icon.

If None, defaults to 16.

variantclass-attributeinstance-attribute​

variant: ButtonVariant = ButtonVariant.PRIMARY

The visual variant of this button.

LINK is not supported and is shown as PRIMARY.

Events​

on_blurclass-attributeinstance-attribute​

on_blur: ControlEventHandler[IconButton] | None = None

Called when this button loses focus.

on_clickclass-attributeinstance-attribute​

on_click: ControlEventHandler[IconButton] | None = None

Called when this button is clicked.

on_focusclass-attributeinstance-attribute​

on_focus: ControlEventHandler[IconButton] | None = None

Called when this button receives focus.

on_hoverclass-attributeinstance-attribute​

on_hover: ControlEventHandler[IconButton] | None = None

Called when the pointer enters or exits this button.

The data property of the event handler argument is True when the pointer entered, and False when it exited.

on_long_pressclass-attributeinstance-attribute​

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

Called when this button is long-pressed.

Methods​

focusasync​

focus()

Requests focus for this button.