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()
}