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, the label is not displayed. By default, label_visible is True. It can be used to create a badge 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.