Pantoia Design
Components

Kbd

사용 예시

안내 문장 안의 키

Kbd에는 키 이름만 적고, 조사와 나머지 문장은 Kbd 밖에 적어요.

Enter를 누르면 검색해요.

tsx
<Field>  <FieldLabel>빠른 검색</FieldLabel>  <Input value={keyword} onChange={e => setKeyword(e.target.value)} placeholder="문서 이름" />  <FieldHelp><Kbd>Enter</Kbd>를 누르면 검색해요.</FieldHelp></Field>

Dialog는 Esc를 눌러 닫아요.

Dialog는 Esc를 눌러 닫아요

Button 안의 단축키

같은 동작을 단축키로도 실행할 수 있으면 Button 안에 단축키를 표시해요.

tsx
<Button color="neutral" emphasis="outline">  <Search />  빠른 검색  <Kbd>Ctrl</Kbd>  <Kbd>K</Kbd></Button>
CtrlK
Ctrl+K

메뉴 항목의 단축키

자주 쓰는 항목에만 단축키를 표시해요.

tsx
<DropdownMenu>  <DropdownMenuTrigger render={<Button color="neutral" emphasis="outline" />}>    문서    <ChevronDown />  </DropdownMenuTrigger>  <DropdownMenuContent className="min-w-56">    <DropdownMenuItem      lead={<Plus />}      trail={<><Kbd>Ctrl</Kbd> <Kbd>N</Kbd></>}    >      새로 만들기    </DropdownMenuItem>    <DropdownMenuItem      lead={<RotateCcw />}      trail={<><Kbd>Ctrl</Kbd> <Kbd>Z</Kbd></>}    >      되돌리기    </DropdownMenuItem>  </DropdownMenuContent></DropdownMenu>
CtrlN
⌘N

단축키 목록

한 화면에서 쓸 수 있는 단축키를 모아서 표시할 때 써요. 키를 오른쪽 끝에 정렬하면 세로로 줄이 맞아서 찾기 쉬워요.

빠른 검색CtrlK
저장CtrlS
닫기Esc
tsx
<div className="flex flex-col gap-tight">  <div className="flex items-center justify-between gap-stack">    <span className="text-prose">빠른 검색</span>    <span className="flex gap-tight">      <Kbd>Ctrl</Kbd>      <Kbd>K</Kbd>    </span>  </div>  <div className="flex items-center justify-between gap-stack">    <span className="text-prose">저장</span>    <span className="flex gap-tight">      <Kbd>Ctrl</Kbd>      <Kbd>S</Kbd>    </span>  </div>  <div className="flex items-center justify-between gap-stack">    <span className="text-prose">닫기</span>    <span className="flex gap-tight">      <Kbd>Esc</Kbd>    </span>  </div></div>

명세

이름
이름값기본
classNamestring-