GPUI Box GitHub

Components / display

Badge builder

A compact status label.

A builder is RenderOnce. Construct and mount it in one expression.

use gpui_kit::display::badge::Badge;

Reviewed in badge.

Construct
new(label: impl Into<SharedString>) -> Self
Options

Chain onto the value.

count() -> Self
icon(glyph: Glyph) -> Self
dot(dot: bool) -> Self
id(ident: impl Into<Ident>) -> Self
tone(tone: Tone) -> Self
neutral() -> Self
accent() -> Self
success() -> Self
warning() -> Self
danger() -> Self
info() -> Self
tint(tint: Hsla) -> Self
variant(variant: Variant) -> Self
color(color: impl Into<ColorChoice>) -> Self
Example · badge
fn badge(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    stack(&theme)
        .w(px(560.0))
        .child(caption(&theme, "Tones, which report rather than decorate"))
        .child(
            row(&theme)
                .child(Badge::new("Neutral").neutral().id("scene.badge.neutral"))
                .child(Badge::new("Accent").accent().id("scene.badge.accent"))
                .child(Badge::new("Success").success().id("scene.badge.success"))
                .child(Badge::new("Warning").warning().id("scene.badge.warning"))
                .child(Badge::new("Danger").danger().id("scene.badge.danger"))
                .child(Badge::new("Info").info().id("scene.badge.info")),
        )
        .child(caption(
            &theme,
            "A glyph or a mark, for a badge whose claim has a picture",
        ))
        .child(
            row(&theme)
                .child(
                    Badge::new("Passed")
                        .success()
                        .icon(Icon::Check)
                        .id("scene.badge.icon"),
                )
                .child(Badge::new("Live").success().dot(true).id("scene.badge.dot"))
                .child(
                    Badge::new("Refused")
                        .danger()
                        .icon(Icon::CloseCircle)
                        .id("scene.badge.refused"),
                ),
        )
        .child(caption(&theme, "The size ramp"))
        .child(
            row(&theme)
                .child(Badge::new("Extra small").xs().id("scene.badge.xs"))
                .child(Badge::new("Small").small().id("scene.badge.sm"))
                .child(Badge::new("Medium").medium().id("scene.badge.md"))
                .child(Badge::new("Large").large().id("scene.badge.lg")),
        )
        .child(caption(
            &theme,
            "Counts: tabular figures without a status wash",
        ))
        .child(
            row(&theme)
                .child(Badge::new("3").count().id("scene.badge.count-single"))
                .child(Badge::new("111").count().id("scene.badge.count-narrow"))
                .child(Badge::new("888").count().id("scene.badge.count-wide")),
        )
        // A tint says whose the badge is. The colours come from the theme's
        // own palette rather than from literals, so a retinted document
        // retints these too, and the tone underneath still reports itself.
        .child(caption(
            &theme,
            "An identity tint, which says whose and not how it is going",
        ))
        .child(
            row(&theme)
                .child(
                    Badge::new("Ada")
                        .tint(identity_tint(&theme, "agent.external"))
                        .id("scene.badge.tinted-neutral"),
                )
                .child(
                    Badge::new("Grace")
                        .tint(identity_tint(&theme, "agent.shell"))
                        .warning()
                        .id("scene.badge.tinted-warning"),
                ),
        )
        .child(caption(
            &theme,
            "The shared tiers, resolved against a palette colour",
        ))
        .children(["grape", "cyan"].map(|group| {
            row(&theme).children(
                [Variant::Filled, Variant::Light, Variant::Subtle].map(|tier| {
                    Badge::new(tier.name())
                        .variant(tier)
                        .color(SharedString::from(group))
                        .id(format!("scene.badge.{group}.{}", tier.name()))
                }),
            )
        }))
        .into_any_element()
}

Source: crates/gpui-kit/src/display/badge.rs