Kbd

키보드 키 또는 단축키를 시각적으로 표시하는 인라인 컴포넌트

개요

Kbd 컴포넌트는 네이티브 <kbd> 요소를 기반으로 키보드 키를 키캡 스타일로 표시합니다. KbdGroup으로 여러 키를 묶어 단축키 조합을 나타낼 수 있습니다. 문서, 단축키 안내, 메뉴의 단축키 표시 등에 활용합니다.

주요 특징

• ✅ 시맨틱 마크업: 네이티브 <kbd> 요소 렌더링
• ✅ 키 조합: KbdGroup으로 여러 키를 그룹화
• ✅ 아이콘 지원: ⌘, ⇧ 등 텍스트 기호 및 lucide 아이콘 표시
• ✅ 인라인 배치: 텍스트 흐름 안에 자연스럽게 삽입
• ✅ 디자인 토큰: 배경, 높이, 폰트 등 테마 커스터마이징 지원

사용 예시

기본

<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
<Kbd>Esc</Kbd>
<Kbd>Enter</Kbd>

키 조합 (KbdGroup)

KbdGroup으로 단축키 조합을 하나의 그룹으로 표시합니다.

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>⇧</Kbd>
  <Kbd>P</Kbd>
</KbdGroup>
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>C</Kbd>
</KbdGroup>

아이콘 키

lucide-react 아이콘을 사용해 플랫폼 독립적인 키 표시가 가능합니다.

<KbdGroup>
  <Kbd>
    <Command />
  </Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
<KbdGroup>
  <Kbd>
    <ArrowUp />
  </Kbd>
  <Kbd>Enter</Kbd>
</KbdGroup>

인라인 텍스트

문장 안에 단축키 안내를 자연스럽게 삽입합니다.

<p>
  검색을 열려면 <Kbd>⌘</Kbd> + <Kbd>K</Kbd> 를 누르세요. 설정은{" "}
  <Kbd>⌘</Kbd> + <Kbd>,</Kbd> 로 열 수 있습니다.
</p>

API Reference

Kbd Props

네이티브 <kbd> 요소의 props를 상속합니다.

KbdGroup Props

기본 사용법

import { Kbd, KbdGroup } from "@vortex/ui-foundation"
 
// 단일 키
<Kbd>Esc</Kbd>
 
// 키 조합
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

접근성

• 네이티브 <kbd> 요소를 렌더링하여 스크린 리더가 키보드 입력으로 인식합니다.
• 내부 아이콘은 자동 크기 조정되며 포인터 이벤트가 비활성화됩니다.
• ✅ 실제 단축키 기능이 있는 경우 안내와 동작을 일치시키세요.
• ✅ 운영체제별 키 표기(⌘/Ctrl)를 사용자 환경에 맞게 제공하세요.

관련 컴포넌트

• Menubar: MenubarShortcut으로 메뉴 단축키 표시
• Badge: 상태 및 라벨 표시