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

Typography

Kbd

Display keyboard key combinations.

Rust
use herogpui::components::kbd::Kbd;

Kbd on docs.rsSource at v0.14.0

Usage

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

Navigation Keys

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

Rust
use herogpui::prelude::Kbd;
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![
        Kbd::new()
            .radius(px(3.))
            .child("\u{2190}")
            .into_any_element(),
        Kbd::new()
            .radius(px(3.))
            .child("\u{2192}")
            .into_any_element(),
        Kbd::new()
            .radius(px(3.))
            .child("\u{2191}")
            .into_any_element(),
        Kbd::new()
            .radius(px(3.))
            .child("\u{2193}")
            .into_any_element(),
        Kbd::new()
            .radius(px(3.))
            .child("Home")
            .into_any_element(),
        Kbd::new().radius(px(3.)).child("End").into_any_element(),
    ])

Special Keys

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

Rust
use herogpui::prelude::Kbd;
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![
        Kbd::new().child("\u{21e7}").into_any_element(),
        Kbd::new().child("\u{2318}").into_any_element(),
        Kbd::new().child("\u{2325}").into_any_element(),
        Kbd::new().child("\u{21b5}").into_any_element(),
        Kbd::new().child("\u{232b}").into_any_element(),
        Kbd::new().child("Esc").into_any_element(),
    ])

Inline Usage

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

Rust
use herogpui::prelude::Kbd;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .items_center()
    .gap(px(6.))
    .text_size(px(14.))
    .child("Press")
    .child(Kbd::new().child("Ctrl"))
    .child(Kbd::new().child("K"))
    .child("to open the command palette.")

Instructional Text

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

Rust
use herogpui::prelude::{ActiveTheme, Kbd, KbdVariant};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .items_center()
    .gap(px(6.))
    .text_size(px(13.5))
    .text_color(cx.colors().muted)
    .child("Save with")
    .child(
        Kbd::new()
            .variant(KbdVariant::Light)
            .child("\u{2318}"),
    )
    .child(Kbd::new().variant(KbdVariant::Light).child("S"))

Usage

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

Rust
use herogpui::prelude::Kbd;
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![
        Kbd::new().child("Ctrl").into_any_element(),
        Kbd::new().child("Shift").into_any_element(),
        Kbd::new().child("K").into_any_element(),
    ])

Variants

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

Rust
use herogpui::prelude::{Kbd, KbdVariant};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(KbdVariant::ALL
        .iter()
        .map(|v| Kbd::new().variant(*v).child("Esc")
                     .into_any_element()))

Anatomy

Rust types

Kbd

Kbd 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 Kbd 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

Kbd styling
MethodValuesDescription
variant(KbdVariant)KbdVariant::Default | KbdVariant::LightVisual variant of the key. Both variants share the base key style; light only clears the background for inline prose.
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: 2 entries ported, 3 partial, 7 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.

Builders

Kbd builders
BuilderValuesDefaultDescription
ParentElement::extendPartialAnyElement—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::Default | KbdVariant::LightKbdVariant::DefaultVisual variant of the key. Both variants share the base key style; light only clears the background for inline prose.
Not ported6 HeroUI entries not ported
Kbd builders not ported
HeroUI v3Why it is not ported
Kbd.className
Kbd.Abbr.titleAccessibility title for the key (e.g., "Command" for ⌘). Sets it on the `<abbr>` element; gpui-pre 0.3.3 has no accessibility tree and the part renders no element, so there is nothing to carry a title.
Kbd.Abbr.keyValueNamed key (`"command"`, `"shift"`, …) that resolves the symbol and the accessibility title. The symbol/title map rides on the `<abbr>` element, which gpui-pre 0.3.3 has no accessibility tree to express, so takes the key symbol as ordinary children instead.
Kbd.Abbr.childrenThe symbol or text to display. Wraps it in an `<abbr title>` for screen readers; the part is not rendered here at all (no accessibility element), so nothing owns its children.
Kbd.Abbr.classNameFor the abbreviation.
Kbd.Content.classNameFor the content wrapper.

Parts

Kbd parts
PartDescription
KbdComposition 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.
KbdPartialContent 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.
Not ported1 HeroUI entry not ported
Kbd parts not ported
HeroUI v3Why it is not ported
Kbd.AbbrThe `<abbr title>` wraps the symbol in for screen readers, styled by the `.kbd__abbr` BEM class. Gpui-pre 0.3.3 has no accessibility tree and no abbr element, so renders no such part and the key text is drawn as the root's own child.
Typography