Kbd

Displays keyboard keys or shortcuts in an inline, readable format.

Ctrl + K

import { Kbd } from '@fidely-ui/react/kbd'

export const KbdBasics = () => {
  return <Kbd>Ctrl + K</Kbd>
}

Usage

import { Kbd } from '@fidely-ui/react'

<Kbd>Ctrl</Kbd>

Variants

Change the appearance of the keyboard key using the variant prop.

F12F5F11

import { Flex, Kbd } from '@fidely-ui/react'

export const KbdVariant = () => {
  return (
    <Flex gap={2}>
      <Kbd variant={'subtle'}>F12</Kbd>
      <Kbd variant={'outline'}>F5</Kbd>
      <Kbd variant={'face'}>F11</Kbd>
    </Flex>
  )
}

Sizes

Adjust the size of the keyboard key using the size prop.

F12F5F11

import { Kbd, Flex } from '@fidely-ui/react'

export const KbdSize = () => {
  return (
    <Flex gap={2}>
      <Kbd size={'sm'}>F12</Kbd>
      <Kbd size={'md'}>F5</Kbd>
      <Kbd size={'lg'}>F11</Kbd>
    </Flex>
  )
}

Props

Kbd

Prop	Default	Type	Description
`size`	`md`	`'sm' \| 'md' \| 'lg'`	Controls the size of the keyboard key.
`variant`	`subtle`	`'solid' \| 'subtle' \| 'outline'`	Defines the visual style of the keyboard key.
`colorPalette`	`gray`	`"red" \| "blue" \| "green" \| "purple" \| "orange" \| "gray"`	Sets the color palette of the component.
`as`	—	`React.ElementType`	The underlying element to render.
`asChild`	`false`	`boolean`	Use the provided child element as the default rendered element, combining their props and behavior.
`unstyled`	`false`	`boolean`	Whether to remove the component's style.
`children`	—	`React.ReactNode`	The content inside the keyboard key, typically the key label.