Badge macrolite

A small count or status label.

Built from: Box Icon Text
Children: none

Preview

Loading the renderer…

textrequired

variant

icon

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "start",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Badge",
          "text": "Active",
          "variant": "default"
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Badge rendered by the React renderer on Web — **Web** React

Badge rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Badge rendered by the Compose renderer on Android — **Android** Compose

Badge rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-badge, painted by each native renderer.

Variants

variant · default

variant · secondary

variant · outline

variant · ghost

variant · destructive

variant · link

Props

Prop	Type	Default	Description
`text`requiredbind	`string`	–	The label or number.
`variant`	`default \| secondary \| outline \| ghost \| destructive \| link`	`"default"`	Filled, secondary, outlined or destructive.
`icon`	`icon`	–	An icon before the text.

Events and slots

No events, no slots. Children: none.

Accessibility

Role: text
Semantics: text (status)

Not focusable; no keys.

Theming

Recipe parts: Badge/rootBadge/iconBadge/label
Keyed by: variant:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme

In the Exponential app

Count badge

EXP-962: the smallest chip there is — a 16px capsule carrying a NUMBER and nothing else, 10px semibold and tabular so a count can climb without the box twitching.

`muted` is a count you parked (the rail's drafts), `primary` one that wants you (unread). Zero renders NOTHING, because a badge is a signal and an empty signal is noise, and past `max` it reads `99+`. PLACEMENT stays at the call site — a row's trailing edge, a nav glyph's corner — so the badge owns only its shape. A `Pill size="sm"` is 24 tall and carries a word; this carries a quantity.

Webn/a

the caller-less web Badge was deleted (UI cleanup batch, EXP-1245..1251); no web count capsule today

iOSleftover

GlassSegmentedControlapps/ios/ExpUI/Sources/GlassSegmentedControl.swift

the one count capsule is inlined in a segment; the tab bar's unread mark is a FloatingBarBadgeDot

Androidleftover

GlassSegmentedControlapps/android/app/src/main/java/com/exponential/app/ui/components/GlassSegmentedControl.kt

the same inline capsule (BadgeFill) inside a segment, reachable by nothing else

Desktopok

controls::pills::count_badgeapps/desktop/crates/exponential-ui-gpui/src/controls/pills.rs

EXP-963: RailBadge::Count hangs it on the rail's Drafts entry