Kbd

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

• 키나 단축키는 본문, 툴팁, 안내 줄 어디서든 Kbd로 적으세요. 함께 누르는 키를 넘기면 됩니다. 'mod'는 명령 보조 키라서 ['mod', 'k']는 Apple 플랫폼에서 ⌘K, 그 밖에서는 Ctrl+K로 적힙니다. 보조 키는 플랫폼의 순서대로 놓고, 글자 하나는 키캡처럼 대문자로 적습니다.
• 키는 놓인 면에서 한 단계 들어간 면 위에, 주변 글자의 87.5% 크기로, 본문 서체로 그려집니다. 툴팁 안에서는 툴팁이 이미 제 면이므로 한 단계 흐린 일반 글자입니다.
• ⌘, ⇧, 화살표 같은 기호는 화면에 보이지 않는 글자로 스크린 리더에 이름을 알립니다. 보조 키 이름은 어느 나라 키보드에나 영어로 인쇄되어 있으니 영어로 둡니다. 화살표 이름은 labels로 번역하세요.

• ⌘나 Ctrl을 직접 적지 마세요. Mac에서만 맞는 ⌘B는 대부분의 독자에게 틀립니다. 'mod'를 쓰고 Kbd에 맡기세요.
• Kbd를 버튼으로 만들거나 단축키를 알리는 유일한 수단으로 쓰지 마세요. 동작은 글로 적고, 단축키가 실행하는 컨트롤에 aria-keyshortcuts를 두세요.
• kbd 요소의 aria-label로 키를 알리지 마세요. 이름을 실을 역할이 없습니다.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

kbd.surf-kbd (the chord) → kbd per key (glyph + hidden spoken name for symbols), joined by + off Apple platforms

키보드와 접근성

• Kbd는 글자이며 Tab 순서에 없습니다.
• 서버와 첫 렌더는 Ctrl 형태로 적어 하이드레이션이 맞고, Apple 페이지는 그 직후 ⌘로 바뀝니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Kbd, Tooltip } from '@surflane/ui'

<p>Press <Kbd keys={['mod', 'k']} /> to search.</p>
<p><Kbd keys='up' /> <Kbd keys='down' /> Choose · <Kbd keys='enter' /> Open</p>
<Tooltip label='Run the pipeline again' shortcut={['mod', 'shift', 'r']}>
  <Button variant='ghost' size='icon' aria-label='Run the pipeline again'>…</Button>
</Tooltip>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰