Kbd

Kbd (키보드 입력)

키보드 입력이나 단축키(hotkey)를 나타내는 컴포넌트예요. kbd 요소 기반으로 만들어졌어요.

출처: 문서

본문

키보드 입력이나 단축키를 나타내요.

<Kbd>Shift + Tab</Kbd>

API Reference

이 컴포넌트는 kbd 요소를 기반으로 하며 공통 margin props를 지원해요.

Prop Type Default
asChild boolean No default value
size Responsive<enum> No default value
variant "classic" | "soft" "classic"

예제 (Examples)

Size

size prop으로 텍스트 크기를 제어해요.

<Flex direction="column" align="start" gap="3">
  <Kbd size="1">Shift + Tab</Kbd>

  <Kbd size="2">Shift + Tab</Kbd>

  <Kbd size="3">Shift + Tab</Kbd>

  <Kbd size="4">Shift + Tab</Kbd>

  <Kbd size="5">Shift + Tab</Kbd>

  <Kbd size="6">Shift + Tab</Kbd>

  <Kbd size="7">Shift + Tab</Kbd>

  <Kbd size="8">Shift + Tab</Kbd>

  <Kbd size="9">Shift + Tab</Kbd>
</Flex>

더 알아보기 (Learn more)