# components/Keycap (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/Keycap.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/Keycap.tsx).

## Components

### `Keycap`

Component.

One key, for places that show a single glyph or word (`esc`, `↵`).

```ts
function Keycap(props: KeycapProps): Element
```

**Parameters**

- `props` (`KeycapProps`): Component props.

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The key's glyph or word.
- `className?` (`string`): Extra classes on the keycap.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/Keycap.tsx:35](https://github.com/Tahul/zidane/blob/main/ui/src/components/Keycap.tsx#L35)

### `KeyCombo`

Component.

One chord as keycaps (`cmd+k` → ⌘ K), macOS glyphs. `size="sm"` for
dense rows (footer hints), default for lists. Several alternatives
(`ctrl+w | cmd+w`) are the caller's business: render one KeyCombo each.

```ts
function KeyCombo(props: KeyComboProps): Element
```

**Parameters**

- `props` (`KeyComboProps`): Component props.

**Returns** `Element`

**Props**

- `className?` (`string`): Extra classes on the wrapping element.
- `physical?` (`boolean`): The chord names physical keys (an app key binding): a punctuation key shows what the user's
  keyboard layout prints on it (`<` for the backquote key on a French Mac), once the layout is known.
- `size?` (`'sm' | 'md'`, default `'md'`): Cap size. Use `sm` for dense rows such as footer hints.
- `spec` (`string`): The chord, keys joined by `+`, such as `cmd+shift+k`. Modifiers are `ctrl`, `cmd` (or `meta`),
  `shift` and `alt` (or `option`); named keys are `enter`, `up`, `down`, `left`, `right`, `tab`
  and `esc`. Any other key shows as typed, uppercased when one character.
- `spoken?` (`boolean`): Off where the control already announces the chord (`aria-keyshortcuts` on a menu row).
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/Keycap.tsx:76](https://github.com/Tahul/zidane/blob/main/ui/src/components/Keycap.tsx#L76)

## Interfaces

### `KeycapProps`

Interface.

Props for [`Keycap`](https://zidane.si/docs/reference/ui-components-keycap.md#Keycap).

```ts
interface KeycapProps
```

**Properties**

- `children` (`ReactNode`): The key's glyph or word.
- `className?` (`string`): Extra classes on the keycap.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/Keycap.tsx:21](https://github.com/Tahul/zidane/blob/main/ui/src/components/Keycap.tsx#L21)

### `KeyComboProps`

Interface.

Props for [`KeyCombo`](https://zidane.si/docs/reference/ui-components-keycap.md#KeyCombo).

```ts
interface KeyComboProps
```

**Properties**

- `className?` (`string`): Extra classes on the wrapping element.
- `physical?` (`boolean`): The chord names physical keys (an app key binding): a punctuation key shows what the user's
  keyboard layout prints on it (`<` for the backquote key on a French Mac), once the layout is known.
- `size?` (`'sm' | 'md'`, default `'md'`): Cap size. Use `sm` for dense rows such as footer hints.
- `spec` (`string`): The chord, keys joined by `+`, such as `cmd+shift+k`. Modifiers are `ctrl`, `cmd` (or `meta`),
  `shift` and `alt` (or `option`); named keys are `enter`, `up`, `down`, `left`, `right`, `tab`
  and `esc`. Any other key shows as typed, uppercased when one character.
- `spoken?` (`boolean`): Off where the control already announces the chord (`aria-keyshortcuts` on a menu row).
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/Keycap.tsx:44](https://github.com/Tahul/zidane/blob/main/ui/src/components/Keycap.tsx#L44)