Kbd

When to UseCopy Anchor Link

• to show the shortcut of a control: at the end of a search field in an Input Group, in a Button, or in a Tooltip
• in a sentence that names a key to press, such as “Press ⌘ K to search”

When Not to UseCopy Anchor Link

• for the shortcut of a menu item (use DropdownMenuShortcut in a Dropdown Menu or CommandShortcut in Command)

AccessibilityCopy Anchor Link

Kbd and KbdGroup both render a kbd element, which is text and can’t receive focus. A Kbd shows a key but doesn’t bind one, so you handle the shortcut in the product.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/kbd

UsageCopy Anchor Link

import { Kbd } from '@/components/ui/kbd';

<Kbd>⌘K</Kbd>;

A CombinationCopy Anchor Link

To show a combination, place one Kbd for each key in a KbdGroup.

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

<KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
</KbdGroup>;

In a ButtonCopy Anchor Link

To place a Kbd in a Button, mark it with data-icon="inline-end", as you would mark an icon. A Kbd ignores pointer events, so a click on it reaches the Button.

import { Button } from '@/components/ui/button';

<Button variant="outline">
    Save
    <Kbd data-icon="inline-end">⏎</Kbd>
</Button>;

API ReferenceCopy Anchor Link

Kbd and KbdGroup add no props. All props are passed to the kbd element.