Kbd API

Import

import { Kbd } from "@stratakit/bricks";
// OR
import Kbd from "@stratakit/bricks/Kbd";

Kbd

Base element: <kbd>

A styled wrapper over the HTML <kbd> element. This is typically used for displaying keyboard shortcuts.

<Kbd>Ctrl</Kbd> <Kbd>S</Kbd>

<Kbd symbol="Control" />

symbol

Type: "Tab" | "Backspace" | "Command" | "Control" | "Down" | "Eject" | "Enter" | "Escape" | "Left" | "Option" | "Right" | "Shift" | "Space" | "Up" | undefined (optional)

Display a specific key symbol from a predefined list. This is useful for displaying modifier keys or special keys, such as Control, Shift, Enter, etc.

Example:

<Kbd symbol="Control" />

variant

Type: "solid" | "muted" | "ghost" | undefined (optional)

Default: "solid"

Additional props

• render