FluxBadge

Compact label for status, counts, or tags. Not clickable — if the affordance needs to trigger an action, use a small button instead. Tones align with the rest of the catalog (neutral/primary/success/warning/danger).

Extends: Text (a2ui/basic@0.10)

Category: primitive

Props

Name	Type	Required	Default
accessibility	object	no	``
component	'FluxBadge'	yes	``
id	string	yes	``
label	string	yes	``
size	'xs' | 'sm' | 'md'	yes	'sm'
tone	'neutral' | 'primary' | 'success' | 'warning' | 'danger'	yes	'neutral'
variant	'subtle' | 'solid'	yes	'subtle'

Examples

Solid primary tag for highlighted items.

UI.badge("New", tone="primary", variant="solid")

Subtle success label in the larger size.

UI.badge("Live", tone="success", size="md")

Anti-patterns

Avoid: Badges are not interactive. Use UI.button with size=sm for a clickable chip.

UI.badge("Click me", action="open")

Avoid: Badge copy must be short (ideally ≤3 words). Long copy belongs in Text, not a badge.

UI.badge("Download the Q3 2024 revenue and expenses report here", tone="primary")

Tokens used

• $color.bg.subtle

• $color.danger.solid

• $color.danger.subtle

• $color.primary.solid

• $color.primary.subtle

• $color.success.solid

• $color.success.subtle

• $color.text.muted

• $color.text.onBrand

• $color.text.primary

• $color.warning.3

• $color.warning.9

• $radius.full

• $radius.sm

• $space.0_5

• $space.1

• $space.1_5

• $space.2

• $typography.size.sm

• $typography.size.xs

• $typography.weight.medium

Basic-catalog fallback

• Component: Text

• Prop map: label → text

• Notes: Basic renderers drop tone + variant + size styling; the badge collapses to a short plain-text run.