Badge

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

ft.FilledIconButton(
    icon=ft.Icons.PHONE,
    badge=ft.Badge(label="3"),
)

Basic Badge

Inherits: BaseControl

Properties

• alignment(Alignment | None) –

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

• bgcolor(ColorValue | None) –

  The background color of the label.

• label(StrOrControl | None) –

  The label of this badge.

• label_visible(bool) –

  Whether the label should be visible.

• large_size(Number | None) –

  The badge's label height if label is provided.

• offset(OffsetValue | None) –

  Combined with alignment to determine the location of the

• padding(PaddingValue | None) –

  The padding added to the label.

• small_size(Number | None) –

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

• text_color(ColorValue | None) –

  The color of the text shown in the label.

• text_style(TextStyle | None) –

  The text style to use for text in the label.

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=ft.Icon(
                    ft.Icons.EXPLORE,
                    badge=ft.Badge(small_size=10),
                ),
                label="Explore",
            ),
            ft.NavigationBarDestination(
                icon=ft.Icons.COMMUTE,
                label="Commute",
            ),
            ft.NavigationBarDestination(
                icon=ft.Icon(
                    ft.Icons.PHONE,
                    badge="10",
                )
            ),
        ]
    )
    page.add(ft.Text("Body!"))


if __name__ == "__main__":
    ft.run(main)

Properties

alignment class-attribute instance-attribute

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.

Note

Has effect only used if label is also provided.

bgcolor class-attribute instance-attribute

bgcolor: ColorValue | None = None

The background color of the label.

label class-attribute instance-attribute

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, it is a StadiumBorder shaped badge with height equal to large_size.

label_visible class-attribute instance-attribute

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 class-attribute instance-attribute

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 class-attribute instance-attribute

offset: OffsetValue | None = None

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

Note

Has effect only used if label is also provided.

padding class-attribute instance-attribute

padding: PaddingValue | None = None

The padding added to the label.

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

Note

Has effect only if label is not None.

small_size class-attribute instance-attribute

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 class-attribute instance-attribute

text_color: ColorValue | None = None

The color of the text shown in the label.

It overrides the color of the label's text_style.

text_style class-attribute instance-attribute

text_style: TextStyle | None = None

The text style to use for text in the label.