Badge
Anatomy
Minimal status indicator for tagging, labeling, and highlighting items with optional leading icon.
maud_ui::primitives::badge
Props
Generated from public Rust fields. Defaults are evaluated from the implementation.
| Prop | Type | Default | Description |
|---|---|---|---|
label | String | "" | Text content displayed in the badge |
variant | Variant | Default | Visual variant (color scheme) |
size | Size | Default | Size step. See Size. |
href | Option<String> | None | Optional href — when Some, the badge renders as an <a> element |
leading_icon | Option<Markup> | None | Optional leading icon — rendered before the label with data-icon="inline-start" |
dot | Option<String> | None | Optional colour dot — a 16px circle rendered before the label (the colour-coding of a label chip). The string is any CSS colour value applied as the dot's background; pass "" for an unpainted dot. |
mono | bool | false | Render the label in the monospace face — for shas, ids, counts, and other machine-register text that should not reflow with the sans stack. |
chip | bool | false | Render as a hollow CHIP: a taller (26px) bordered-transparent badge with a 1px foreground-10% border, sized to sit inline with controls. Its corner is --mui-radius-sm, the same as a filled badge — the consumer's token, not a fixed 6px. The filled variants above ignore this; it is the counterpart to the solid Badge, for a taggable, dismissable, count-bearing chip. |
trailing_count | Option<String> | None | Optional trailing count — the 2 in mail 2. Rendered as a mono figure set slightly apart from the label. |
kbd | Option<String> | None | Optional trailing kbd hint — the ⌘K in a command chip. Rendered in the mono face inside a subtle key cap. |
class | Option<String> | None | Extra class names appended to the class list — the escape hatch for per-instance overrides that a closed enum cannot express. |
Examples
Variants
Leading icon
Monospace
Hollow chip
The taller bordered-transparent counterpart to the filled pill — carries a trailing count or a kbd hint.
In Context
Labels
Usage and composition
Import
use maud_ui::primitives::badge::{self, Variant, Props};
Example
use maud::html;
use maud_ui::primitives::badge;
html! {
(badge::render(badge::Props {
label: "Live".to_string(),
variant: badge::Variant::Success,
href: None,
leading_icon: None,
}))
}
Hollow chip
chip: true swaps the pill for a taller bordered-transparent chip sized to sit inline with 24–28px controls. It carries an optional trailing_count or kbd:
badge::render(badge::Props {
label: "mail".into(),
variant: badge::Variant::Outline,
chip: true,
trailing_count: Some("2".into()),
..Default::default()
});
badge::render(badge::Props {
label: "Command".into(),
variant: badge::Variant::Outline,
chip: true,
kbd: Some("⌘K".into()),
..Default::default()
});
Variants
| Variant | Use Case |
|---|---|
| Default | General-purpose status or tag. |
| Secondary | Muted or secondary information. |
| Success | Positive status (approved, live, etc.). |
| Warning | Cautionary status (beta, experimental, etc.). |
| Danger | Error or destructive state. |
| Outline | Outlined badge for subtle emphasis. |
| Ghost | Ghost-style badge with minimal styling. |
| Link | Badge styled as a link for navigation. |
Related
Alert, Button, Label, Tag.
Shadcn reference
https://ui.shadcn.com/docs/components/base/badge
Status density (0.9.1)
Default status badges use a 22px border box, 12px labels and the full radius. Semantic variants use the shared tone background/border/text triples in both themes. Variant::Chip remains an explicit 26px command chip; use the standard semantic variants for table statuses. Links stay undecorated in application chrome.
Accessibility
- When
hrefis present, badge is an<a>element with standard link semantics. - When
hrefis None, badge is a<span>(non-interactive). - Icon (if present) is inline with the label; no special ARIA needed if icon is decorative.