# Keyboard shortcut

A key chord drawn as one key cap, the way a Mac menu shows it, such as ⇧⌘K.

A shortcut is a key and the modifiers held with it. Shortcut::parse reads "cmd+shift+k", "ctrl+k" or "alt+enter" in any case, and gives None for an unknown modifier, an empty string or a chord with no key. The label writes the modifiers in Apple's order ⌃⌥⇧⌘ and then the key, with signs for named keys such as ↩ for enter and ⎋ for escape.

## Use it

Web:

```rust
use ocean_ui_core::Shortcut;
Shortcut::parse("cmd+k")
```

Native:

```rust
use ocean_ui_native::{Show, core::Shortcut, widgets::Kbd};
if let Some(chord) = Shortcut::parse("cmd+shift+k") { Kbd(chord).show(ui); }
```

Cargo feature `base`; since 2026-10-29.

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `key` | `String` | `—` | The key in lowercase, such as k, enter, escape, /, f2 or up. |
| `cmd` | `bool` | `—` | Command (⌘) is held. |
| `shift` | `bool` | `—` | Shift (⇧) is held. |
| `alt` | `bool` | `—` | Option (⌥) is held. |
| `ctrl` | `bool` | `—` | Control (⌃) is held. |

On the Mac: ![Keyboard shortcut, dark](/ui/native/kbd-dark.png) ![Keyboard shortcut, light](/ui/native/kbd-light.png)

## Examples

### Chords

Parsed from text, drawn with the Mac's symbols.

```rust
for k in ["cmd+k", "shift+cmd+p", "alt+enter"].into_iter().filter_map(Shortcut::parse) {
    k.html(out);,
}
```

### Single keys

A key alone, such as the slash that opens search.

```rust
for k in ["/", "esc", "enter"].into_iter().filter_map(Shortcut::parse) {
    k.html(out);,
}
```

### In a sentence

Shortcuts read inline with the words around them.

```rust
out.push_str("<span>Press</span>");
if let Some(k) = Shortcut::parse("cmd+k") { k.html(out); } out.push_str("<span>to search.</span>");
```

## Accessibility

- The chord is text in one kbd element, so a screen reader reads its signs in order.
- It is not a control; it takes no focus and does nothing when clicked.
- Name the action in words beside it, since the signs alone say only which keys to press.

## Related

- [Command palette](/ui/components/command-palette.md)
- [Menu](/ui/components/menu.md)
- [Button](/ui/components/button.md)