Kbd
A key or a key combination, shown as the reader presses it.
Kbd shows a key the reader presses, such as Esc, and Kbd a combination such as
Ctrl + K. Use it in instructions, tooltips and menus. It only shows the keys: binding a shortcut
is your application's work.
Press Ctrl+K to search this site, and Esc to close the search.
Ctrl+B shows or hides the navigation.
// apps/docs/examples/ui/kbd.tsx'use client';
import {Kbd, KbdGroup} from '@workspace/active-ui/components/primitives/kbd';
/** * Keys as the reader presses them: a single key in a sentence, and a * combination as a group. These are the real shortcuts of this site. */export default function KbdExample() { return ( <div className="flex flex-col items-center gap-3 text-sm"> <p> Press{' '} <KbdGroup> <Kbd>Ctrl</Kbd> <span>+</span> <Kbd>K</Kbd> </KbdGroup>{' '} to search this site, and <Kbd>Esc</Kbd> to close the search. </p> <p> <KbdGroup> <Kbd>Ctrl</Kbd> <span>+</span> <Kbd>B</Kbd> </KbdGroup>{' '} shows or hides the navigation. </p> </div> );}Usage#
import {Kbd, KbdGroup} from '@workspace/active-ui/components/primitives/kbd';
<KbdGroup> <Kbd>Ctrl</Kbd> <span>+</span> <Kbd>K</Kbd></KbdGroup>;Anatomy#
Kbd: one key, a<kbd>element.Kbd: keys that belong together, with a small gap; put the separator you want between them.Group
What your application provides#
The key names in the reader's language and for their platform, such as
Ctrlon Windows and⌘on macOS.The shortcut itself, and a way to do the same without it.
Accessibility#
A <kbd> is read as its text. Write names a screen reader can say ("Ctrl", "Esc") rather than
symbols alone, or add the name in a visually hidden text beside a symbol.
API#
Parts that take only their element’s attributes
Kbd: the attributes of a<kbd>, with className and ref.Kbd: the attributes of aGroup <div>, with className and ref.
This page adapts the Kbd documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.