Kbd

A kbd displays a key of the keyboard as a small key cap. It sets the key apart from the text around it, so users see at once what to press, and a group joins several keys into one shortcut.

UsageCopy Anchor Link

import { Kbd } from "@biem/ui/components/ui/kbd";

export function KbdDefault() {
	return <Kbd>Enter</Kbd>;
}

ExamplesCopy Anchor Link

With IconCopy Anchor Link

Many keys carry a symbol on the keyboard itself, such as shift or the arrow keys, and users find them faster by the mark they already know. With an icon, the key cap repeats that mark, while a written name keeps the key clear for users whose keyboard prints a different symbol.

GroupCopy Anchor Link

Shortcuts often combine a modifier with a second key, and their meaning lies in the combination. Inside a KbdGroup, those keys form one unit that never breaks across lines in running text, so users read the shortcut as a whole.

In TooltipCopy Anchor Link

Users learn a shortcut most easily at the moment they reach for the action it triggers. Placed in a tooltip, the key cap names the shortcut together with that action and adapts to the tooltip surface, so the key stays legible there.

API ReferenceCopy Anchor Link

KbdCopy Anchor Link

Kbd shows a single key as a key cap. It renders a kbd and has no props of its own.

KbdGroupCopy Anchor Link

KbdGroup joins the keys of one shortcut in a row. It renders a kbd and has no props of its own.