Badge

A small count or status marker drawn on the corner of another control — most often an icon or button. In Ruflet, badge is passed as the badge: property of the control it decorates.

Example

icon_button(
  "notifications",
  badge: badge("3"),
  on_click: ->(_e) { open_inbox }
)

Common properties

• label — the label control or value inside the badge; the first positional

argument maps to this property

• label_visible — show / hide the badge
• bgcolor
• text_color
• alignment
• offset
• small_size / large_size

Usage

Most controls accept a badge: property. Pass a plain string for a dot-style badge, or a badge(...) for a counted/styled one. Toggle label_visible to show or hide it without rebuilding the parent.

Complete API

Helpers

• badge(label = ..., **props)

Accepted properties

• alignment — Alignment of the content within the control.
• bgcolor — Background color.
• data — Arbitrary value you can attach to the control and read back in handlers.
• key — Stable identity used to preserve state across rebuilds.
• label — Text label shown for the control.
• label_visible — Sets the label visible property.
• large_size — Sets the large size property.
• offset — Translation offset applied to the control.
• padding — Inner spacing between the border and the content.
• small_size — Sets the small size property.
• text_color — Text color.
• text_style — Text style.

Wire reference

• Family: materials
• Widget type: badge