Kbd

키보드 키 또는 단축키를 표시하는 컴포넌트

Basic Usage

키보드 키를 시각적으로 표시합니다.

EnterEscTabSpace

tsx

<Kbd>Enter</Kbd>
<Kbd>Esc</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Space</Kbd>

Modifier Keys

수정자 키를 표시할 수 있습니다.

CtrlAltShift

tsx

<Kbd>Ctrl</Kbd>
<Kbd>Alt</Kbd>
<Kbd>Shift</Kbd>
<Kbd>
  <Command className="size-3" />
</Kbd>

Kbd Group (Shortcuts)

KbdGroup으로 키 조합을 표시할 수 있습니다.

CtrlCCtrlVCtrlShiftPK

tsx

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>C</Kbd>
</KbdGroup>

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>V</Kbd>
</KbdGroup>

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>Shift</Kbd>
  <Kbd>P</Kbd>
</KbdGroup>

<KbdGroup>
  <Kbd>
    <Command className="size-3" />
  </Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

In Context

텍스트와 함께 사용하는 예시입니다.

Press Ctrl + S to save

Use Tab to navigate between fields

Press Esc to close the dialog

tsx

<p>Press <Kbd>Ctrl</Kbd> + <Kbd>S</Kbd> to save</p>
<p>Use <Kbd>Tab</Kbd> to navigate between fields</p>
<p>Press <Kbd>Esc</Kbd> to close the dialog</p>

Usage

tsx

import { Kbd, KbdGroup } from '@gpters-internal/ui';

function Example() {
  return (
    <div>
      <p>
        Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open search
      </p>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </div>
  );
}