Kbd

Kbd is a pretty display for gorgeous keyboard shortcuts.

ctrl + alt + delete

Code Example

<Kbd>shift</Kbd>

Components

Kbd is a standalone component.

Kbd

The Kbd component can be customized with following props:

Prop	Type	Description
`size`	string	sets the size to one of the below prop names
`lg`	boolean	sets the size to `lg`
`md`	boolean	sets the size to `md`
`sm`	boolean	sets the size to `sm`
`xs`	boolean	sets the size to `xs`

Size

There are two ways of specifying Kbd size:

The xs, sm, md, and lg boolean props.
The size prop, which accepts a string with any of the above prop names.

xs sm md lg

Code Example

<Kbd lg>shift</Kbd>

Arrow Keys

▲

◀︎▼▶︎

Code Example

<div>
  <Flex justify-center>
    <Kbd>▲</Kbd>
  </Flex>
  <Flex justify-center>
    <Kbd>◀︎</Kbd>
    <Kbd>▼</Kbd>
    <Kbd>▶︎</Kbd>
  </Flex>
</div>

Prev Countdown

Next Loading