Badge

Compact status/label pill in five tones and three fills (soft, solid, outline).

Data Display

Usage

import { Badge } from "@zudo-sg/ui";

<Badge tone="success">Active</Badge>
<Badge tone="brand" variant="solid">New</Badge>

Outline

Soft

Controls

Tone

Solid

Source

<Badge tone="brand" variant="outline">brand</Badge>
<Badge tone="success" variant="outline">success</Badge>
<Badge tone="danger" variant="outline">danger</Badge>

Live CSS

Injected into the previews above. Badge

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */