Kbd

A kbd element styled with the kbd recipe. Pick a variant and a size, and set colorPalette to change its color. KbdGroup wraps the keys of one shortcut and passes its size and variant to every Kbd inside.

Usage

import { Kbd } from "@isbatak/react-ui/kbd"

export function KbdDemo() {
  return <Kbd>Shift + Tab</Kbd>
}

<Kbd>F12</Kbd>

Examples

Combinations

Put the keys of a combination side by side, with the separator as plain text.

Ctrl+Shift+Del

import { Kbd } from "@isbatak/react-ui/kbd"
import { HStack } from "styled-system/jsx"

export function KbdCombinationsDemo() {
  return (
    <HStack gap="1">
      <Kbd>Ctrl</Kbd>+<Kbd>Shift</Kbd>+<Kbd>Del</Kbd>
    </HStack>
  )
}

Group

Wrap the keys of a shortcut in KbdGroup. Its size and variant apply to every key inside, and it renders a kbd too, so the whole shortcut reads as one input to assistive technology.

⌘KCtrl+Shift+P

import { Kbd, KbdGroup } from "@isbatak/react-ui/kbd"
import { Stack } from "styled-system/jsx"

export function KbdGroupDemo() {
  return (
    <Stack gap="4" alignItems="flex-start">
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
      <KbdGroup size="sm" variant="subtle">
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>Shift</Kbd>
        <span>+</span>
        <Kbd>P</Kbd>
      </KbdGroup>
    </Stack>
  )
}

Function keys

Modifier symbols are single characters, so each key keeps the recipe's minimum width and stays square.

⌘⌥⇧⌃

import { Kbd } from "@isbatak/react-ui/kbd"
import { HStack } from "styled-system/jsx"

export function KbdFunctionKeysDemo() {
  return (
    <HStack gap="2">
      <Kbd>⌘</Kbd>
      <Kbd>⌥</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>⌃</Kbd>
    </HStack>
  )
}

Variants

Set variant to raised, outline, subtle or plain. The default is raised.

Shift + TabShift + TabShift + TabShift + Tab

import { Kbd } from "@isbatak/react-ui/kbd"
import { HStack } from "styled-system/jsx"

export function KbdVariantsDemo() {
  return (
    <HStack gap="4">
      <Kbd variant="raised">Shift + Tab</Kbd>
      <Kbd variant="outline">Shift + Tab</Kbd>
      <Kbd variant="subtle">Shift + Tab</Kbd>
      <Kbd variant="plain">Shift + Tab</Kbd>
    </HStack>
  )
}

Sizes

Set size to sm, md or lg. The default is md.

Shift + TabShift + TabShift + Tab

import { Kbd } from "@isbatak/react-ui/kbd"
import { HStack } from "styled-system/jsx"

export function KbdSizesDemo() {
  return (
    <HStack gap="4">
      <Kbd size="sm">Shift + Tab</Kbd>
      <Kbd size="md">Shift + Tab</Kbd>
      <Kbd size="lg">Shift + Tab</Kbd>
    </HStack>
  )
}

Within text

Kbd is inline, so it sits in a sentence without extra markup.

Press F12 to open the developer tools.

import { Kbd } from "@isbatak/react-ui/kbd"
import { styled } from "styled-system/jsx"

export function KbdWithinTextDemo() {
  return (
    <styled.p textStyle="sm">
      Press <Kbd>F12</Kbd> to open the developer tools.
    </styled.p>
  )
}

Recipe

Variant	Values	Default
`variant`	`raised`, `outline`, `subtle`, `plain`	`raised`
`size`	`sm`, `md`, `lg`	`md`