Badge
Overview
Section titled “Overview”Badge renders a plain span with a cva-style Variant class set. It composes no Navius
primitive and implements no keyboard, focus, or dismiss behavior; it is a styling-only
wrapper. It optionally implements an opt-in motion-pulse class (from Navius.Motion) for
a looped live-status pulse.
Install
Section titled “Install”navius add badge --to ./src/MyApp --namespace MyApp.Ui@using Zits.Ui.Components
<ZitsBadge Variant="secondary">In progress</ZitsBadge>Parts and props
Section titled “Parts and props”Badge is a single element with no part tree. ChildContent and Attributes render as
given; the component’s own surface is:
| Prop | Type | Default | Description |
|---|---|---|---|
Variant |
string |
"default" |
One of default, secondary, destructive, outline. Selects the Tailwind class set. |
Pulse |
bool |
false |
Adds the motion-pulse class for a looped live-status pulse. Inert unless the app links _content/Navius.Motion/navius-motion.css. |
Styling surface
Section titled “Styling surface”Attributes on ZitsBadge is forwarded to the rendered span and merged with the
Variant class set via Cn.Merge, with the caller’s classes applied last.
| Parameter | Values |
|---|---|
Variant |
default · secondary · destructive · outline |
Data attribute hooks
Section titled “Data attribute hooks”None. The component’s classes target no data-* attributes; Pulse toggles a plain
motion-pulse class, not a data attribute.
Badge has no role or interactive semantics of its own: it renders a plain span, so any
role/aria-* a given usage needs (e.g. a live region for a status badge) must be
supplied by the caller through Attributes.