Badge

A small label used to tag or categorize content. Four variants.

When to use

• A Default badge for neutral tags.
• A Secondary badge for slightly stronger emphasis.
• An Outline badge when you want a visible boundary without a fill.
• A Destructive badge for error or destructive states.

API

Badge::new(label)

Creates a badge with the given label.

Method	Type	Default	Description
.variant(variant)	BadgeVariant	Default	Visual style

BadgeVariant

Variant	Style
Default	bg ZINC_100, ZINC_700 text
Secondary	bg ZINC_200, ZINC_800 text
Outline	1px ZINC_300 border, ZINC_700 text
Destructive	bg RED_100, RED_700 text

Usage

use gpui::{Component, div, prelude::*};
use components::{Badge, BadgeVariant};

div()
    .child(Component::new(
        Badge::new("New").variant(BadgeVariant::Destructive),
    ))

Copy the source

crates/components/src/badge.rs — self-contained, stateless, and free to modify.