Typography

ShortcutHint

Inline shortcut hint that renders a key combo via Kbd alongside an action label, with an accessible text representation not reliant on visual keycaps alone.

import { ShortcutHint } from '@lostgradient/cinder/shortcut-hint';
shortcutinline
01

Overview

Inline shortcut hint that renders a key combo via Kbd alongside an action label, with an accessible text representation not reliant on visual keycaps alone.

Usage

svelte 
<script lang="ts">
  import { ShortcutHint } from '@lostgradient/cinder/shortcut-hint';
</script>

Guidance

Use When

  • Showing a keyboard shortcut inline beside a label in a toolbar button, menu item, or tooltip.
  • Pairing with command-palette items to surface available shortcuts.

Avoid When

  • Displaying a full shortcut reference table — use keyboard-shortcuts instead.
Live preview
02

When to use

Use when
  • Showing a keyboard shortcut inline beside a label in a toolbar button, menu item, or tooltip.
  • Pairing with command-palette items to surface available shortcuts.
Avoid when
  • Displaying a full shortcut reference table — use keyboard-shortcuts instead.
03

Examples

Toolbar shortcut hints

Inline shortcut hints in a compact toolbar, keys positioned after the label.

04

Props

Props for shortcut-hint
Name Type Default Required Bindable Description
keys string[] req The key sequence to display (e.g. ["Ctrl", "S"] or ["Space"]).
keysLabel text Optional accessible label for the key combo. Defaults to joining keys with " plus ".
children snippet The action or label to render alongside the key combo.
keysPosition 'before' | 'after' 'after' Whether to place the keys before or after the children.