# Kbd

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

```slint
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

```slint
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`).

```slint
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.

```slint
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.