maud-ui64 components

Badge

Variants

DefaultSecondarySuccessWarningDangerOutlineGhostLink

Leading icon

●Live◼Paused→Docs

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".

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