Skip to content
MIZU.

Badge

A compact, bordered label for metadata and status.

Live — this one is real

NewStableDraft

Usage

import { Badge } from "mizu-ui";

export function Example() {
  return (
    <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
      <Badge tone="accent">New</Badge>
      <Badge tone="paper">Stable</Badge>
      <Badge>Draft</Badge>
    </div>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect ui/Badge.tsx

Source is included in the npm package under src/ui/Badge.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
tone"paper" | "muted" | "accent" | "line""muted"Label treatment.
diamondbooleantrueShow the decorative marker.

Accessibility

State remains visible text. Add a live region only when the status changes dynamically.

Motion

Static text.

Works alongside

ButtonPrimitivesMarkSectionTag