Badge

Badge

Bases: BaseControl

Badges are used to show notifications, counts, or status information on navigation items such as NavigationBar or NavigationRail destinations or a button's icon.

alignment

alignment: Alignment | None = None

Aligns the `label relative to the content of the badge.

The alignment positions the label in similar way Container.content is positioned using Container.alignment, except that the badge alignment is resolved as if the label was a large_size square and offset is added to the result.

Has effect only used if label is also provided.

bgcolor

bgcolor: ColorValue | None = None

The background color of the label.

data

data: Any = skip_field()

Arbitrary data of any type.

key

key: (
    str | int | float | bool | ValueKey | ScrollKey | None
) = None

label

label: StrOrControl | None = None

The label of this badge.

Typically a 1 to 4 characters text.

If the label is not provided, the badge is shown as a filled circle of small_size diameter.

If label is provided, the label is a StadiumBorder shaped badge with height equal to large_size.

label_visible

label_visible: bool = True

Whether the label should be visible.

It can be used to create a badge only shown under certain conditions.

large_size

large_size: Number | None = None

The badge's label height if label is provided.

If the default value is overridden then it may be useful to also override padding and alignment.

Defaults to BadgeTheme.large_size, or if that is None, falls back to 16.

offset

offset: OffsetValue | None = None

Combined with alignment to determine the location of the label relative to the content.

Has effect only used if label is also provided.

padding

padding: PaddingValue | None = None

The padding added to the label.

Has effect only if label is not None.

Defaults to BadgeTheme.padding, or if that is None, falls back to 4 pixels on the left and right.

page

page: Page | PageView | None

The page (of type Page or PageView) to which this control belongs to.

parent

parent: BaseControl | None

The direct ancestor(parent) of this control.

It defaults to None and will only have a value when this control is mounted (added to the page tree).

The Page control (which is the root of the tree) is an exception - it always has parent=None.

small_size

small_size: Number | None = None

The badge's label diameter if label is not provided.

Defaults to BadgeTheme.small_size, or if that is None, falls back to 6.

text_color

text_color: ColorValue | None = None

The color of the text shown in the label. This color overrides the color of the label's text_style.

text_style

text_style: TextStyle | None = None

The text style to use for text in the label.

before_event

before_event(e: ControlEvent)

before_update

before_update()

This method is called every time when this control is being updated.

Note

Make sure not to call/request an update() here.

did_mount

did_mount()

init

init()

is_isolated

is_isolated()

update

update() -> None

will_unmount

will_unmount()

Examples

Live example

Badge decorating an icon on a NavigationBar

import flet as ft


def main(page: ft.Page):
    page.title = "Badge example"

    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon_content=ft.Icon(
                    ft.Icons.EXPLORE,
                    badge=ft.Badge(small_size=10),
                ),
                label="Explore",
            ),
            ft.NavigationBarDestination(
                icon=ft.Icons.COMMUTE,
                label="Commute",
            ),
            ft.NavigationBarDestination(
                icon_content=ft.Icon(
                    ft.Icons.PHONE,
                    badge="10",
                )
            ),
        ]
    )
    page.add(ft.Text("Body!"))


ft.run(main)