유틸리티 / kbd
Kbd
키보드 입력을 표시하는 <kbd> 토큰.
01 · Specimen
먼저 보고, 그다음 계약을 읽습니다
키보드 입력을 표시하는 <kbd> 토큰.
Workbench 불러오는 중…
Component intent의도와 경계 읽기
네이티브 <kbd> 시맨틱 요소에 `axe-kbd` 스타일만 입힌 소품이다. 자체 prop 은 없고 children·className·나머지 HTML 속성을 그대로 <kbd> 로 전파한다. ⌘K, Esc 같은 단축키 힌트 표기에 쓴다.
02 · Use
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
단축키 힌트
import { Kbd } from "@axe/ui";export function Example() { return ( <> <span><Kbd>⌘</Kbd> <Kbd>K</Kbd> 로 검색</span> <Kbd>Esc</Kbd> </> );}CSS-only (비-React)
<kbd class="axe-kbd">⌘</kbd> <kbd class="axe-kbd">K</kbd>03 · React
Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
...rest | React.HTMLAttributes<HTMLElement> | — | — | children/className 병합 후 나머지 속성은 <kbd> 로 전파. 자체 prop 없음. |
04 · Any stack
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-kbd | stable | 키 캡 스타일 <kbd> 루트 (유일 클래스). |
05 · Inclusive
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
ARIA
시맨틱 <kbd> 요소 — 별도 role 불요. 상호작용 없음(표시 전용). 여러 키 조합은 각각 <Kbd> 로 나눠 스크린리더가 개별 키로 읽게 하는 편이 낫다.
06 · Judgment