maud-ui79 components

Badge

Variants

DefaultSecondarySuccessWarningDangerInfoAccentVioletRoseOutlineGhostLink

Leading icon

●Live◼Paused→Docs

Monospace

b6e38d1eIMP-2491v0.3.0

Hollow chip

The taller bordered-transparent counterpart to the filled pill — carries a trailing count or a kbd hint.

mail2issues14Command⌘Kuser.rs×

In Context

Inbox3
Drafts12
Errors2

Labels

Authentication APIStablev2.1
Streaming SDKBetav0.9
Legacy ClientDeprecatedv1.0

Usage

use maud_ui::primitives::badge;

let html = badge::render(badge::Props {
    label: "New".into(),
    variant: badge::Variant::Success,
});

Badge

Minimal status indicator for tagging, labeling, and highlighting items with optional leading icon.

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,
    }))
}

Props

FieldTypeDefaultDescription
labelString""Text content displayed in the badge.
variantVariantDefaultVisual variant (color scheme): Default, Secondary, Success, Warning, Danger, Outline, Ghost, Link.
hrefOptionNoneOptional URL; if Some, badge renders as an <a> element; if None, renders as a <span>.
leading_iconOptionNoneOptional icon markup rendered before the label with data-icon="inline-start".
monoboolfalseRender the label in the monospace face — for shas, ids, counts.
chipboolfalseRender as a taller (26px) hollow chip: bordered-transparent, 1px foreground-10% border, 6px radius. The counterpart to the filled pill.
trailing_countOptionNoneTrailing count set apart in the mono face — the 2 in mail 2.
kbdOptionNoneTrailing kbd hint in a subtle key cap — the ⌘K in a command chip.

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

VariantUse Case
DefaultGeneral-purpose status or tag.
SecondaryMuted or secondary information.
SuccessPositive status (approved, live, etc.).
WarningCautionary status (beta, experimental, etc.).
DangerError or destructive state.
OutlineOutlined badge for subtle emphasis.
GhostGhost-style badge with minimal styling.
LinkBadge styled as a link for navigation.

Accessibility

  • When href is present, badge is an <a> element with standard link semantics.
  • When href is None, badge is a <span> (non-interactive).
  • Icon (if present) is inline with the label; no special ARIA needed if icon is decorative.

Related

Alert, Button, Label, Tag.

Shadcn reference

https://ui.shadcn.com/docs/components/base/badge

← Back to Gallery