Components

Kbd

Used to display textual user input from keyboard.

Playground

⌘⇧P

Keys—children

Separator—separator

Usage

Import Kbd and KbdGroup from the design system. Kbd renders a semantic <kbd> element sized to a 20px keycap — it is pointer-events-none and select-none, so it reads as annotation rather than a control.

Ctrl

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

<Kbd>Ctrl</Kbd>

Group

Wrap related keys in KbdGroup — it lays the keycaps out inline with a 4px gap and keeps them together as a single <kbd> for assistive technology.

⌘⇧⌥⌃

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>⇧</Kbd>
  <Kbd>⌥</Kbd>
  <Kbd>⌃</Kbd>
</KbdGroup>

With Separator

Interleave plain text between keycaps for chords and sequences — a plus sign for keys pressed together, a word like “then” for keys pressed in order.

Ctrl+B⌘thenP

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <span>+</span>
  <Kbd>B</Kbd>
</KbdGroup>
<KbdGroup>
  <Kbd>⌘</Kbd>
  <span>then</span>
  <Kbd>P</Kbd>
</KbdGroup>

In Button

Kbd inherits Button's gap like an icon would. Add data-icon="inline-end" so the button tightens its end padding, exactly as it does for trailing icons.

<Button variant="outline" size="sm">
  Accept <Kbd data-icon="inline-end">⏎</Kbd>
</Button>
<Button variant="outline" size="sm">
  Cancel <Kbd data-icon="inline-end">Esc</Kbd>
</Button>

In Tooltip

Inside TooltipContent the keycap re-themes itself automatically — in-data-[slot=tooltip-content]:bg-background/20 swaps the muted fill for a translucent one that works on the inverted tooltip surface. Hover the button to see it.

<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline" size="sm">
      Save
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    Save changes
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>S</Kbd>
    </KbdGroup>
  </TooltipContent>
</Tooltip>

In Input Group

A common pattern for command palettes and search fields: an inline-end addon advertising the shortcut that focuses the input.

⌘K

<InputGroup>
  <InputGroupInput placeholder="Search…" />
  <InputGroupAddon align="inline-end">
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </InputGroupAddon>
</InputGroup>

RTL

KbdGroup needs no extra classes in right-to-left layouts — it is a flex row, so the reading order of keys and separators follows the direction of the document.

حفظCtrl+S

<div dir="rtl">
  حفظ
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>S</Kbd>
  </KbdGroup>
</div>

API Reference

Both parts render a native <kbd> element and accept every HTML attribute. There are no variants — restyle via className, or target data-slot="kbd" from a parent, as TooltipContent and Button do.

Component	Prop	Default
Kbd	className?: string	—
KbdGroup	className?: string	—

<Kbd data-slot="kbd">⌘</Kbd>
<KbdGroup data-slot="kbd-group">…</KbdGroup>

Tokens used

7 design tokens consumed by the Kbd component.

--muted
Muted
bg-muted
--muted-foreground
Muted Foreground
text-muted-foreground
--background
Background
in-data-[slot=tooltip-content]:bg-background/20in-data-[slot=tooltip-content]:text-backgrounddark:in-data-[slot=tooltip-content]:bg-background/10
--font-sans
Font Sans (Inter)
font-sans
--text-xs
Text Extra Small (12px)
text-xs
--radius-sm
Radius 0.6× (6px)
rounded-sm
--spacing
Spacing unit (4px)
h-5min-w-5px-1gap-1