Skip to main content

Badge

A Material Design "badge".

Badges are used to show notifications, counts, or status information about its control, typically an icon that is a part of a NavigationBar or a NavigationRail destination or a button's icon.

The information is shown as text on a badge's label. If the text is not provided, the badge is shown as a filled circle of small_size diameter.

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

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.app(main)

Properties​

alignment​

Aligns the label relative to the content of the badge.

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

This value is only used if text property is provided.

For example:

badge.alignment = ft.alignment.top_left

Value is of type Alignment.

bgcolor​

Background color of the label.

label_visible​

If False, label is not displayed. By default, label_visible is True. It can be used to create a badge that's only shown under certain conditions.

Value is of type bool.

large_size​

The badge's label height if text is provided.

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

Value is of type OptionalNumber and defaults to 16.

offset​

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

Has effect only used if text is also provided.

Value is of type OffsetValue.

padding​

The padding added to the badge's label.

This value is only used if text is provided. Defaults to 4 pixels on the left and right.

Value is of type PaddingValue.

small_size​

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

Vaue is of type OptionalNumber and defaults to 6.

text​

The text shown on badge's label, typically 1 to 4 characters.

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

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

Value is of type str.

text_color​

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

text_style​

The text style to use for text in the label.

Value is of type TextStyle.