Component ShortcutHint

ShortcutHint

A small key-hint pill (e.g. ⌘K).

Useful for showing keyboard shortcuts next to menu items or actions.

When to use

• Trailing shortcut hints in menus
• Showing “discoverable” shortcuts in tooltips or command lists

Example

use yororen_ui::component::shortcut_hint;

let view = shortcut_hint("⌘K");

API

• shortcut_hint("..."): constructor
• tone(Hsla): override background color

Defaults

• Typography: text_xs
• Text color: theme.content.tertiary
• Background: theme.surface.sunken (unless overridden by tone(...))

Example: Trailing hint in a row

use gpui::div;
use yororen_ui::component::{list_item, shortcut_hint};

let row = list_item().content("Open settings").trailing(div().child(shortcut_hint("⌘,")));