Skip to content
PorabuildHeroGPUI component library
v0.14.0 · Apache-2.0
HeroGPUI

Data display

Chip

A compact element for tags and filters.

Rust
use herogpui::components::chip::{Chip, ChipLabel};

Chip on docs.rsSource at v0.14.0

Usage

Showing Usage, live: HeroGPUI compiled to WebAssembly. The canvas has no accessibility tree; each example's description and code below carry the same information.

Usage

`text_size` sets the label size and paired leading; `radius` replaces the chip's default corner. An element expression with window: &mut Window and cx: &mut App in scope.

Rust
use herogpui::prelude::{Chip, ChipLabel};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![Chip::new()
        .text_size(px(14.))
        .radius(px(4.))
        .child(ChipLabel::new().child("Chip"))
        .into_any_element()])

Statuses

An element expression with window: &mut Window and cx: &mut App in scope.

Rust
use herogpui::prelude::{Chip, ChipLabel, ChipVariant, Color};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        Chip::new()
            .color(Color::Success)
            .variant(ChipVariant::Soft)
            .child(ChipLabel::new().child("Active"))
            .into_any_element(),
        Chip::new()
            .color(Color::Warning)
            .variant(ChipVariant::Soft)
            .child(ChipLabel::new().child("Paused"))
            .into_any_element(),
        Chip::new()
            .color(Color::Danger)
            .variant(ChipVariant::Soft)
            .child(ChipLabel::new().child("Vacation"))
            .into_any_element(),
    ])

With Icons

An element expression with window: &mut Window and cx: &mut App in scope.

Rust
use herogpui::prelude::{ActiveTheme, Chip, ChipLabel, Color, icons};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        Chip::new()
            .color(Color::Success)
            .child(gpui::svg()
                       .size(px(16.))
                       .path(icons::CHECK)
                       .text_color(cx.colors().foreground)
                       .into_any_element())
            .child(ChipLabel::new().child("Verified"))
            .into_any_element(),
        Chip::new()
            .child(gpui::svg()
                       .size(px(16.))
                       .path(icons::EXTERNAL_LINK)
                       .text_color(cx.colors().foreground)
                       .into_any_element())
            .child(ChipLabel::new().child("Link"))
            .into_any_element(),
        Chip::new()
            .color(Color::Accent)
            .child(gpui::svg()
                       .size(px(16.))
                       .path(icons::SEARCH)
                       .text_color(cx.colors().foreground)
                       .into_any_element())
            .child(ChipLabel::new().child("Search"))
            .into_any_element(),
    ])

Variants

An element expression with window: &mut Window and cx: &mut App in scope.

Rust
use herogpui::prelude::{Chip, ChipLabel, ChipVariant, Color};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(ChipVariant::ALL
        .iter()
        .map(|v| {
            Chip::new()
                .variant(*v)
                .color(Color::Accent)
                .child(ChipLabel::new().child(v.label()))
        }))

Colors

An element expression with window: &mut Window and cx: &mut App in scope.

Rust
use herogpui::prelude::{Chip, ChipLabel, Color};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(Color::ALL
        .iter()
        .map(|c| {
            Chip::new()
                .color(*c)
                .child(ChipLabel::new().child(c.label()))
        }))

Sizes

An element expression with window: &mut Window and cx: &mut App in scope.

Rust
use herogpui::prelude::{Chip, ChipLabel, Size};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(Size::ALL
        .iter()
        .map(|s| {
            Chip::new()
                .size(*s)
                .child(ChipLabel::new().child(s.label()))
        }))

Anatomy

Rust types

ChipChipLabel

Chip is assembled from these builders. The API reference lists each one.

Customization

Shared appearance belongs on ThemeBuilder::components and .recipe("name"). Typed builders change how Chip looks at one call site. Every builder also carries sx for placement, width and flex: it takes GPUI's own styling methods and refines them over the component's root after the theme, so an instance override wins. Behaviour builders live in the API reference below.

Styling

Chip styling
MethodValuesDescription
color(Color)Color::Default | Color::Accent | Color::Success | Color::Warning | Color::DangerColor role of the chip; fills and label colors resolve through the chip.css cascade.
variant(ChipVariant)ChipVariant::Primary | ChipVariant::Secondary | ChipVariant::Tertiary | ChipVariant::SoftVisual style variant: solid role fill, the default fill, a transparent fill, or the soft mix.
size(Size)Size::Sm | Size::Md | Size::LgSets the padding and type size of the chip; a chip has no height of its own at any size.
Rust
// The one slot for caller-owned low-level styling: GPUI's
// styling methods, refined over the root element last.
.sx(|el| {
    el.bg(gpui::rgba(0xffa500ff))             // background
        .text_color(gpui::rgba(0x000000ff))   // text
        .w(gpui::px(13.))                     // size
        .h(gpui::px(12.))
})

API reference

Against HeroUI v3.2.6: 4 entries ported, 3 partial, 2 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.

Builders

Chip builders
BuilderValuesDefaultDescription
ParentElement::extendPartialAnyElement—Chip content, rendered verbatim in composed order (an icon, a dot, the label, a trailing element). Auto-wraps plain string and number children in `Chip.Label`; GPUI elements carry no type a parent can intercept, so the wrap is explicit and bare `Chip` children draw without the label padding.
color(Color)Color::Default | Color::Accent | Color::Success | Color::Warning | Color::DangerColor::DefaultColor role of the chip; fills and label colors resolve through the chip.css cascade.
variant(ChipVariant)ChipVariant::Primary | ChipVariant::Secondary | ChipVariant::Tertiary | ChipVariant::SoftChipVariant::SecondaryVisual style variant: solid role fill, the default fill, a transparent fill, or the soft mix.
size(Size)Size::Sm | Size::Md | Size::LgSize::MdSets the padding and type size of the chip; a chip has no height of its own at any size.
Not ported2 HeroUI entries not ported
Chip builders not ported
HeroUI v3Why it is not ported
Chip.classNameFor the root element.
Chip.Label.classNameFor the label slot.

Parts

Chip parts
PartDescription
ChipPartialRoot on the `.chip` BEM classes: a padded flex row around one text line — no height, no border at any variant or color — with a 2px gap and the soft radius. Gpui-pre 0.3.3 has no inline-flex or `w-fit`, so is a block-level flex that hugs content only inside a flex parent.
ChipLabelLabel text slot on the `.chip__label` BEM class — `px-0.5`; a chip root's arbitrary icon or dot children take no label padding. Auto-wraps plain string and number children of the root here; makes that wrap explicit with the `ChipLabel` part.
BadgeTable