Перейти до вмісту
tatetUI

Kbd

Клавіатурна підказка — клавіша або послідовність із розпізнаванням модифікаторів.

Дрібний елемент, без якого сучасні інтерфейси втрачають «клавіатурність»: підказки в меню, у палітрі команд, у футері пошуку. Написаний самостійно, бо з тостів і палітри він тепер потрібен у кількох місцях одразу.

Приклад

KCtrlKEscPq

В буфері: —

Вигляд: list

Модифікатори розпізнаються за назвою: meta/cmd → ⌘, alt → ⌥, shift → ⇧, enter → ↵, escape → Esc, стрілки → ↑↓←→. Звичайні клавіші піднімаються в регістрі (uppercase, вимикається).

API

Props

НазваТипТиповоОпис
combostring | string[]Клавіша або послідовність: 'K' або ['Ctrl', 'K']. Модифікатори розпізнаються за назвою: meta/cmd/command → ⌘, alt/option → ⌥, shift → ⇧, enter → ↵, escape → Esc, стрілки → ↑↓←→.
uppercasebooleantrueПіднімати регістр звичайних клавіш: `k` → `K`.

Слоти

НазваОпис
defaultСире наповнення замість props.combo.

Коли використовувати

Поряд із діями, які реально мають клавіатурний шлях: пошук (⌘K), закриття (Esc), підтвердження (↵).

Коли НЕ використовувати

Не показуйте послідовність, якої немає: невиконана клавіатурна підказка гірша за її відсутність. Для послідовностей типу «g потім d» краще текст, а не два Kbd підряд.

Доступність

Елемент — семантичний <kbd>. Комбінації читаються скрінрідером як текст; розділювач «+» прихований (aria-hidden) — читається «Ctrl K», а не «Плюс».