Kbd

Клавиши и сочетания: одна строка «mod+k» — ⌘K на Mac и Ctrl+K на остальных, для скринридера — словами. Бесплатно, MIT · Базовые элементы › Текст и иконки

Установка

npx valyro-cli@latest add kbd

npx shadcn@latest add https://valyro.xyz/r/kbd.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Kbd } from 'valyro-ui';

Пропсы

Prop	Type	Default
`shortcut`	`string`		A whole combination as one string: "mod+k", "shift+enter", "mod+shift+p", or a sequence "g, i". `mod` is ⌘ on Apple platforms and Ctrl elsewhere. Without it, the children are one key: `<Kbd>Esc</Kbd>`.
`platform`	`'mac' \| 'other'`		Force the platform's key names. Default: detected after hydration (the server and the first render show `other`).
`format`	`'symbols' \| 'text'`		`symbols` ⌘⇧K, `text` Ctrl + Shift + K. Default: symbols on Mac, text elsewhere.
`size`	`'sm' \| 'md'`	`'md'`	Key height and text size.
`labels`	`Partial<KbdLabels>`		Words screen readers say for the keys of `shortcut`, and the "then" of a sequence.

Похожие компоненты

Icon — Любая иконка по правилам кита: размер от текста, штрих темы, зеркалирование в RTL, доступное имя; createIcon и галерея из 111 иконок
Highlight — Совпадения поиска в тексте: без учёта регистра и диакритики, несколько терминов своими цветами, готовые диапазоны, текущее совпадение
Button — Кнопки всех типов
Icon Button — Кнопка с иконкой
Color Mode Switch — Светлая, тёмная или системная: выбор сохраняется, применяется до первого кадра, синхронизируется между вкладками и сменяется плавно
Button Group — Группы кнопок
Copy to Clipboard — Копирование с подтверждением
Badge — Статусы и метки
Tag — Удаляемые и кликабельные теги, группы с «+N»
Avatar — Аватары пользователей
Tooltip — Всплывающие подсказки
Separator — Разделители

Назад: Icon · Далее: Highlight · Весь раздел «Базовые элементы»