キー表示KbdExperimental
キーボードショートカットのキーを表示します。
プレビュー
検索を開くには⌘Kを押します。
状態とバリエーション
ショートカット
複数のキーは小さな間隔で横並びにします。
⌘ShiftP
文章内のキー
ヘルプ文の中にキーを混ぜても、行高を大きく崩さないサイズです。
選択中の項目を確定するには Enter を押します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| 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>
);
}