Quill docs

Badge

A compact status pill, tag, or chip. Soft brand reads as an active status; outline neutral reads as an inert label; a chip can be removable. Same variant/size/tone axes as the rest of the system — use tone to encode meaning, not decoration.

Preview#

Status pills, tags, and removable chips across every variant, size, and tone.

variant

BadgeBadgeBadgeBadge

size

BadgeBadgeBadge

tone

BadgeBadgeBadge

kind

BadgeTagChip

Playground#

Change the controls — the preview and the snippet update live.

Badge

Variant

Size

Tone

Badge::badge("Badge")
    .variant(Variant::Soft)
    .size(Size::Sm)
    .tone(Tone::Brand)
    .render()

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Badge

Variant

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .attr("data-q-variant", "soft")
    .child(
        Badge::badge("Badge")
            .variant(Variant::Soft)
            .render()
    )

Code#

Construct the component with its builder:

Badge::badge("Active").variant(Variant::Soft).tone(Tone::Brand).render()
Badge::tag("Draft").variant(Variant::Outline).tone(Tone::Neutral).render()
Badge::chip("Filter").removable(true).render()