104Get started
HextaUI

Kbd: Icons and actions

Put icons in a cap for actions without a key name, and give them a visually hidden label.

ShiftClickto select a range

Backspaceto go back

import { IconArrowBackUp, IconClick } from "@tabler/icons-react"

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdComposed() {
  return (
    <div className="flex flex-col items-center gap-3 text-sm text-muted-foreground">
      <p className="flex items-center gap-2">
        <KbdGroup>
          <Kbd keys="shift" />
          <Kbd>
            <IconClick aria-hidden="true" />
            <span className="sr-only">Click</span>
          </Kbd>
        </KbdGroup>
        to select a range
      </p>
      <p className="flex items-center gap-2">
        <Kbd>
          <IconArrowBackUp aria-hidden="true" />
          <span className="sr-only">Backspace</span>
        </Kbd>
        to go back
      </p>
    </div>
  )
}

Add this example

This adds the example as components/examples/kbd/composed.tsx, together with the Kbd component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/kbd-composed.json

To add only the component, follow the Kbd installation.

Props in this example

The Kbd props this example sets, from the API reference.

Kbd

PropTypeDefault
keysKeys joined with +, like "mod+shift+p". mod is ⌘ on Apple devices and Ctrl elsewhere. Names such as alt, enter, escape, up and space become symbols or short words, and get a spoken name for screen readers.
string–

Every prop is in the Kbd API reference.

More Kbd examples

See them all, with keyboard support and accessibility notes, on the Kbd page.

Related components