Kbd
Display keyboard key combinations.
1use herogpui::components::kbd::Kbd;Usage
1use herogpui::prelude::Kbd;
2use gpui::prelude::*;
3
4row(vec![
5 Kbd::new().child("\u{2190}").into_any_element(),
6 Kbd::new().child("\u{2192}").into_any_element(),
7 Kbd::new().child("\u{2191}").into_any_element(),
8 Kbd::new().child("\u{2193}").into_any_element(),
9 Kbd::new().child("Home").into_any_element(),
10 Kbd::new().child("End").into_any_element(),
11])Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
Kbd
Kbd is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Kbd uses.
Styling
| Style | Description |
|---|---|
flex + items_center + justify_center + text_center + gap(px(2.)) + px(px(8.)) + h(px(24.)) + key_radius + text_size(px(14.)) + line_height(px(20.)) + FontWeight::MEDIUM + whitespace_nowrap + colors.muted | Key chip: 24px tall, 8px side padding, 14px medium muted text at the 20px text-sm leading on `bg-default` at the key radius, with 2px between multiple keys and no border or shadow. The negative word-spacing is not portable — GPUI 0.2.2 has no word-spacing — and the root is a block-level flex rather than inline-flex. |
folded into Kbd's items_center + justify_center | Centered content wrapper; the root row's centering covers it. |
KbdVariant::Light => el.bg(transparent_black()) | The light variant only clears the background; every other style is inherited from the base rule, which is why the variant branch changes nothing else. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
ParentElement:: | AnyElement | — | Content of the key. Renders plain text directly in the root; the port's children are laid out by the same centered row, so the key text needs no wrapper part. |
variant( | KbdVariant | KbdVariant:: | Visual variant of the key. Both variants share the base key style; light only clears the background for inline prose. |
Parts
| Part | Description |
|---|---|
Kbd | Composition root on the `.kbd` BEM class — v3's Kbd carries no `data-slot`: an inline-flex, centered key chip at the key radius — `h-6 px-2 text-sm font-medium text-muted` on `bg-default`, space between multiple keys, `whitespace-nowrap` and v3's negative word-spacing. Static: no states. |
Kbd | Content wrapper on the `.kbd__content` BEM class: a centered flex box. Folds it into the root row's centering and draws the key text directly. |