Kbd

キーボードのキーを、キーキャップとして示す

インポート

ts
import { Kbd } from '@k8ordo/ui';

使い方

Esc
tsx
<Kbd>Esc</Kbd>

キーの組み合わせ

同時に押すキーは、1 キーずつ Kbd を並べる。

CtrlShiftP
tsx
<Kbd>Ctrl</Kbd>
<Kbd>Shift</Kbd>
<Kbd>P</Kbd>

記号のキー

⌘ や ⇧ のような記号は、読み上げると意味が通らない。label を渡すと、見た目は記号のまま、読み上げには label が使われる。

CommandK
tsx
<Kbd label="Command">⌘</Kbd>
<Kbd>K</Kbd>

Props

children
Type: string
Default: -
label?
Type: string
Default: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLElement>

Components