キー表示KbdExperimental
キーボードショートカットのキーを表示します。
プレビュー
検索を開くには⌘Kを押します。
状態とバリエーション
ショートカット
複数のキーは小さな間隔で横並びにします。
⌘ShiftP
文章内のキー
ヘルプ文の中にキーを混ぜても、行高を大きく崩さないサイズです。
選択中の項目を確定するには Enter を押します。
綴りのキー名と記号が混ざる一覧
枠は中身の幅に合わせて伸び、高さは変わりません。Backspace のような長い名前と ⌘ のような1文字を同じ行に並べても、行の高さがそろいます。
- CtrlShiftS
- 下書きを保存する
- Esc
- 編集をやめる
- Backspace
- 直前の1文字を消す
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| children | ReactNode | - | キー名や記号を表示する内容です。 |
| className | string | - | 余白や色を局所的に調整するためのクラスです。 |
使い方
import { Kbd } from "@gunjo/ui";
export function Example() {
return (
<span className="inline-flex items-center gap-1 text-sm">
検索を開くには <Kbd>⌘</Kbd><Kbd>K</Kbd> を押します。
</span>
);
}