Chip — HeroGPUI

Usage

Live example

Rust

1use herogpui::prelude::{Chip, ChipLabel};
2use gpui::prelude::*;
3
4Chip::new()
5    .child(ChipLabel::new().child("Chip"))

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

ChipChipLabel

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

Customization

Appearance builders and theme tokens Chip uses.

Styling

Chip styling
Style	Description
`flex + items_center + gap(px(2.)) + px(px(8.)) + py(px(2.)) + text_size(px(12.)) + line_height(px(20.)) at every size + FontWeight::MEDIUM + soft_radius + flex_shrink_0`	8px/2px padding around one 12px medium line, 16px soft radius, 2px gap, and no border. The base `leading-5` holds at every size: compiled Tailwind 4 lowers it to the `--tw-leading` custom property that every `text-*` utility consumes, so the size rules' re-applied `text-xs`/`text-sm` keep the 20px line. `inline-flex` and `w-fit` are not portable: is a block-level flex that hugs content only inside a flex parent (kept `shrink-0`).
`ChipLabel => px(px(2.))`	Two-pixel label padding, living on the label part and nowhere else.
`(px(4.), px(0.), px(12.), px(20.)) / (px(8.), px(2.), px(12.), px(20.)) / (px(12.), px(4.), px(14.), px(20.))`	4px/0, 8px/2px (the base restated), and 12px/4px paddings with 12/12/14px text on the one 20px line the base `leading-5` sets; no size touches the radius or adds a height.
`muted_foreground() => role.soft_foreground(colors.foreground); colors.default.foreground for default`	The five color classes only relabel the chip; they set no fill. Resolves `currentColor` to theme's foreground because GPUI has no ancestor color context.
`ChipVariant::Primary => paint() => (role.color, role.foreground)`	The base tokens hold until a compound rule fills with the role; resolves the whole pair in `paint()`.
`ChipVariant::Secondary => paint() => (colors.default.color, muted_foreground())`	The docs' styling reference calls secondary "with border", but the sheet declares nothing for it and no chip rule draws a border; the color class only relabels.
`ChipVariant::Tertiary => paint() => no background`	Tertiary only clears the fill and paints no background; chip.css declares no border for any chip.
`ChipVariant::Soft => paint() => (role.soft(), muted_foreground())`	The soft compound cells fill with the per-role soft mix — the default role mixes at 50%, not the 15% the accent and status roles use — and keep the soft label.

API reference

Builders

Chip builders
Builder	Type	Default	Description
`ParentElement::extend`	`AnyElement`	—	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`	`Color::Default`	Color role of the chip; fills and label colors resolve through the chip.css cascade.
`variant(ChipVariant)`	`ChipVariant`	`ChipVariant::Secondary`	Visual style variant: solid role fill, the default fill, a transparent fill, or the soft mix.
`size(Size)`	`Size`	`Size::Md`	Sets the padding and type size of the chip; a chip has no height of its own at any size.

Parts

Chip parts
Part	Description
`Chip`	Root 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 0.2.2 has no inline-flex or `w-fit`, so is a block-level flex that hugs content only inside a flex parent.
`ChipLabel`	Label 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.

Badge Table