Kbd

A key cap, and the row of them a chord is written as.

import { Kbd, KbdGroup } from "@glint/components/kbd.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 24px;

            KbdGroup {
                Kbd { text: "⌘"; }
                Kbd { text: "K"; }
            }

            KbdGroup {
                Kbd { text: "Ctrl"; }
                Kbd { text: "Shift"; }
                Kbd { text: "P"; }
            }
        }
    }
}

Usage

import { Kbd, KbdGroup } from "@glint/components/kbd.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component AppWindow inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            KbdGroup {
                Kbd { text: "Esc"; }
            }
        }
    }
}

Kbd renders a keyboard key cap. KbdGroup lays out shortcut chords with consistent spacing between keys.

Examples

Tones

tone accommodates different surface backgrounds (on-glass, on-glow, muted) and semantic highlights (affirm-on-glass, deny-on-glass, affirm-on-glow, deny-on-glow).

import { Kbd, KbdTone } from "@glint/components/kbd.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 240px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 12px;

            Kbd { text: "Glass"; tone: KbdTone.on-glass; }
            Kbd { text: "Glow"; tone: KbdTone.on-glow; }
            Kbd { text: "Muted"; tone: KbdTone.muted; }
        }

        HorizontalLayout {
            alignment: center;
            spacing: 12px;

            Kbd { text: "Accept"; tone: KbdTone.affirm-on-glass; }
            Kbd { text: "Reject"; tone: KbdTone.deny-on-glass; }
        }

        HorizontalLayout {
            alignment: center;
            spacing: 12px;

            Kbd { text: "Affirm Glow"; tone: KbdTone.affirm-on-glow; }
            Kbd { text: "Deny Glow"; tone: KbdTone.deny-on-glow; }
        }
    }
}

Sizes

Use size: KbdSize.sm for dense menus and inline rows, or size: KbdSize.md for standard key caps.

import { Kbd, KbdSize } from "@glint/components/kbd.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;
            spacing: 16px;

            Kbd {
                text: "⌘S";
                size: KbdSize.sm;
            }

            Kbd {
                text: "⌘S";
                size: KbdSize.md;
            }
        }
    }
}

API Reference

Properties

Property	Type	Default	Description
`text`	`in string`	no default	Label inside the key cap (e.g. `⇧`, `K`).
`size`	`in KbdSize`	`KbdSize.md`	Height + padding — sm, md.
`tone`	`in KbdTone`	`KbdTone.on-glass`	Surface × semantics — on-glow, on-glass, muted, affirm/deny-on-glow, affirm/deny-on-glass.

Enums

Enum	Values
`KbdSize`	`sm`, `md`
`KbdTone`	`on-glow`, `on-glass`, `muted`, `affirm-on-glow`, `deny-on-glow`, `affirm-on-glass`, `deny-on-glass`

KbdGroup

The chord: a row of caps with the theme’s gap between them. Layout only — each cap goes on announcing its own key, and a host embedding a chord as an ornament silences the caps the way it silences a lone one.

KbdGroup publishes no properties, callbacks or functions of its own. What a call site can set on it is the Slint HorizontalLayout it inherits.

Accessibility

Accessible text role. Key caps publish an accessible-role: text announcing the key name.
Embedded ornament silence. When a key hint is embedded inside an already-accessible component (such as a menu row describing its shortcut), silence the key cap with accessible-role: none to avoid duplicate announcements.