Kbd

키보드 단축키를 표시하는 인라인 요소입니다.

데모

저장CtrlS

커맨드 팔레트 열기CtrlShiftP

검색/

코드

<div className="flex items-center gap-2 text-sm text-muted-foreground">
  저장
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>S</Kbd>
  </KbdGroup>
</div>

사용 규칙

Do

여러 키를 조합할 때는 KbdGroup으로 묶어 순서와 간격을 일관되게 유지한다.
실제 사용자 OS(맥/윈도우)에 맞는 조합키 표기(⌘/Ctrl)를 사용한다.
단축키 옆에는 항상 해당 액션 이름을 텍스트로 함께 보여준다.

Don't

Kbd를 클릭 가능한 버튼처럼 사용하지 않는다 — 순수 표시용 요소다.
존재하지 않거나 실제로 동작하지 않는 단축키를 표기하지 않는다.