ElevatedButton in Flet

ElevatedButton is a commonly used component in Flet for creating raised buttons that have a filled background and shadow, making them stand out visually. These buttons are great when you need to draw attention to a particular action or separate a button from a complex background.

You can also use Button as an alias for ElevatedButton, allowing for more flexibility in your code.

In this article, we'll explore what ElevatedButton is, when to use it, its properties, and show practical examples to get you started.

When to Use ElevatedButton

Use ElevatedButton when you need to emphasize an action or separate it visually from the rest of the UI.
However, to avoid "shadow creep" (too many shadows on screen), use it only when necessary — especially when the button needs to stand out from a patterned or colored background.

For more guidelines on button usage, see Material 3 buttons documentation.

Basic ElevatedButton Example

Here is how to create a simple elevated button and a disabled button:

import flet as ft

def main(page: ft.Page):
    page.title = "Basic elevated buttons"
    page.add(
        ft.ElevatedButton(text="Elevated button"),
        ft.Button("Disabled button", disabled=True),
    )

ft.app(main)

ElevatedButton with Click Event

You can easily handle click events using ElevatedButton to make your app interactive:

import flet as ft

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

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

    b = ft.ElevatedButton("Button with 'click' event", on_click=button_clicked, data=0)
    t = ft.Text()

    page.add(b, t)

ft.app(main)

ElevatedButton with Custom Content

ElevatedButton supports adding custom content, like multiple icons or text blocks, using other Flet controls:

import flet as ft

def main(page: ft.Page):
    page.title = "Elevated buttons with custom content"
    page.add(
        ft.ElevatedButton(
            width=150,
            content=ft.Row(
                [
                    ft.Icon(name=ft.Icons.FAVORITE, color="pink"),
                    ft.Icon(name=ft.Icons.AUDIOTRACK, color="green"),
                    ft.Icon(name=ft.Icons.BEACH_ACCESS, color="blue"),
                ],
                alignment=ft.MainAxisAlignment.SPACE_AROUND,
            ),
        ),
        ft.ElevatedButton(
            content=ft.Container(
                content=ft.Column(
                    [
                        ft.Text(value="Compound button", size=20),
                        ft.Text(value="This is secondary text"),
                    ],
                    alignment=ft.MainAxisAlignment.CENTER,
                    spacing=5,
                ),
                padding=ft.padding.all(10),
            ),
        ),
    )

ft.app(main)

ElevatedButton with Hover Effect

You can also add hover effects to an ElevatedButton using the on_hover event:

import flet as ft

def main(page: ft.Page):
    def on_hover(e):
        e.control.bgcolor = "orange" if e.data == "true" else "yellow"
        e.control.update()

    page.add(
        ft.ElevatedButton(
            "I'm changing color on hover", bgcolor="yellow", on_hover=on_hover
        )
    )

ft.app(main)

Properties of ElevatedButton

Here are some key properties you can set on ElevatedButton:

• adaptive: If True, adapts button style to the platform (e.g., CupertinoButton on iOS/macOS). Default is False.
• autofocus: If True, this button will get initial focus.
• bgcolor: Background color of the button.
• clip_behavior: Defines how the content inside the button is clipped.
• color: Text color of the button.
• content: Custom content (like icons, rows, columns).
• elevation: Elevation (shadow) of the button.
• icon: Icon inside the button.
• icon_color: Color of the icon.
• style: Custom styles using ButtonStyle.
• text: Button label text.
• tooltip: Tooltip text shown on hover.
• url: URL to open when clicked. Fires on_click afterward if registered.
• url_target: Where to open the URL. Defaults to opening in a new tab.

Methods

• focus(): Programmatically move focus to this button.

Events

• on_blur: Fires when button loses focus.
• on_click: Fires when button is clicked.
• on_focus: Fires when button receives focus.
• on_hover: Fires when mouse enters or exits the button area.
• on_long_press: Fires when the button is long-pressed.

ElevatedButton is a flexible and powerful component in Flet, perfect for emphasizing key actions in your app. By using its various properties and event handlers, you can create interactive and visually distinct buttons that enhance user experience.