Skip to main content

Badge

A Material Design "badge".

Badges are used to show notifications, counts, or status information about its child, 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 on a NavigationBar destination icon"
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(
                icon_content=ft.Badge(
                    content=ft.Icon(ft.icons.EXPLORE),
                    small_size=10,
                ),
                label="Explore",
            ),
            ft.NavigationDestination(icon=ft.icons.COMMUTE, label="Commute"),
            ft.NavigationDestination(
                icon_content=ft.Badge(content=ft.Icon(ft.icons.PHONE), text="10")
            ),
        ]
    )
    page.add(ft.Text("Body!"))


ft.app(target=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

bgcolor​

Background color of the label.

content​

A child Control contained by the badge, typically an icon that's part of a NavigationBar or a NavigationRail destination.

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.

large_size​

The badge's label height if text is provided.

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

offset​

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

This value is only used if text is provided.

See Controls offset for possible values.

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.

See Container's padding for possible values.

small_size​

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

Default value is 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.

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. See text_style properties for possible values.