Badges¶

Communication

In Material Design 3¶

A badge shows that something has news. The small one is a dot, and the large one carries a short count or text. It sits on the corner of what it describes.

In Tesserae¶

widget: Badge is a view Tesserae ships (Badge_View.yaml) with its look as rules (Badge_Stylesheet.yaml): a 6 pixel error dot, or with a value a 16 pixel pill in label_small on on_error, at least 16 wide and growing with its text.

Property	Type	Meaning
`value`	a number or a few characters	what it shows; empty is a dot
`limit`	whole number	a number over it shows as the limit and a plus (`999+`); `999` by default
`show`	true or false	whether it shows; `show: "{{ unread > 0 }}"` hides a zero count
`anchored`	true or false	its children are the host, and the badge sits over the host's top right corner

Anchored, a dot overlaps the corner by 4 and a pill starts 12 in from the corner and 4 above it. The badge is hidden from a screen reader: put the count in the host's label ("Inbox, 3 unread"). The parts a stylesheet can address are mark and label.

widget: Badge is the view-language form (see The View Language); the fragment below is the older component: form, which keeps working.

Fragment	What it is	Stylesheet
`component: BadgeDot`	A small dot that marks something as having news, with no number.	`BadgeDot_Stylesheet.yaml`
`component: BadgeLabeled`	A small pill carrying a short count or label.	`BadgeLabeled_Stylesheet.yaml`

How it is built¶

Each fragment is a *_Component.yaml: its structure, and the parameters it takes. Its look is in its stylesheet, linked under each one.

`BadgeDot`¶

A small dot that marks something as having news, with no number. Its look: BadgeDot_Stylesheet.yaml.

It takes no parameters.

{id: root, kind: Rect}

`BadgeLabeled`¶

A small pill carrying a short count or label. Its look: BadgeLabeled_Stylesheet.yaml.

Parameter		Default
`label`	required
`width`	required

params: [label, width]
id: root
kind: Container
children:
  - id: label
    kind: Text
    text:
      content: "{{ label }}"
      typography_role: label_small
      text_align: center

Using it¶

name: nav
widget: Container
style: {flex_direction: horizontal, gap: 24, width: 200, height: 60, padding: 16}
children:
  - widget: Badge
    value: "{{ unread }}"
    show: "{{ unread > 0 }}"
    anchored: true
    children:
      - {widget: Icon, icon: email, style: {width: 24, height: 24, foreground: on_surface}}
  - widget: Badge
    anchored: true
    children:
      - {widget: Icon, icon: home, style: {width: 24, height: 24, foreground: on_surface}}

Using the fragment¶

In a view:

# Home_View.yaml
id: root
kind: Container
children:
  - id: unread
    component: BadgeLabeled
    with: {label: "3", width: 20}

In Python:

from tesserae.widgets import badge

unread = badge(app.window, "3")

Changing its look¶

To restyle a component in your whole app, put a stylesheet of the same name next to your views. Its rules go over the built-in ones, field by field, and the rest is kept:

# BadgeDot_Stylesheet.yaml, next to your views
styles:
  - id: root
    style: {background: tertiary}

See Component stylesheets.