Kbd
Interactive UI Explorer
아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.
Live Preview
⌘+K검색 열기
Esc 닫기
↑↓ 이동
Enter 선택
Kbd
키보드 키/단축키를 표시하는 키캡입니다. 조합은 여러 개를 "+"로 이어 표현합니다.
단일 키 / 조합
size(sm/md)와 임의 콘텐츠(⌘·↑·Enter 등)를 지원합니다.
Source Code
⌘ + K 검색 열기
↑↓ 이동Enter 선택Esc 닫기
Live Preview
Implementation
제작 코드
이 컴포넌트가 실제로 어떻게 구현되어 있는지 — 본체 .tsx 파일을 그대로 보여줍니다. variant 매핑·접근성 처리·forwardRef 패턴 등 디테일을 그대로 확인할 수 있어요.
Kbdtypescript
/**
* Kbd 컴포넌트
*
* 키보드 키/단축키를 표시하는 인라인 키캡입니다.
* - 여러 키 조합은 <Kbd> 여러 개를 "+"로 이어 붙여 표현합니다.
* 예) <Kbd>⌘</Kbd> + <Kbd>K</Kbd>
*/
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
export interface KbdProps {
children: ReactNode;
size?: 'sm' | 'md';
className?: string;
}
export function Kbd({ children, size = 'md', className }: KbdProps) {
return (
<kbd
className={cn(
'inline-flex items-center justify-center rounded-md border border-b-2 border-slate-300 bg-slate-50 font-sans font-semibold text-slate-600 shadow-[0_1px_0_rgba(0,0,0,0.04)]',
size === 'sm' ? 'min-w-[1.25rem] px-1 py-0.5 text-[10px]' : 'min-w-[1.5rem] px-1.5 py-0.5 text-xs',
className,
)}
>
{children}
</kbd>
);
}