Brickv0.1.12
Kbd
TypographyBrick 0.1.12

Kbd

Kbd renders native keyboard-input notation with finished Brick sizing and visual recipes.

Live example

Built from the published package

Interactive

Press Ctrl + Shift + P to open commands.

Choose with confidence

Know when Kbd is the right part

Use it when

Use Kbd inside meaningful copy to name one key, or repeat it for an authored key sequence.

Choose another path when

Do not use Kbd to register shortcuts, listen for keys, translate platform labels, or render ordinary technical literals. Application behavior owns shortcuts; use Code for literals.

Installation and imports

tsx
import { Kbd } from "@flowstack-ui/brick/kbd";
import "@flowstack-ui/brick/styles.css";

For modular CSS:

tsx
import "@flowstack-ui/brick/styles/core.css";
import "@flowstack-ui/brick/styles/kbd.css";

Kbd is also available from @flowstack-ui/brick.

Quick start

tsx
<Text as="p">Press <Kbd>F12</Kbd> to open developer tools.</Text>

Visual recipes and states

Raised suggests a physical key, outline preserves a lighter boundary, subtle uses a quiet filled surface, and plain keeps only typographic notation. Sizes adjust the compact key footprint without creating a control target.

Examples

tsx
<Text as="p">
  Press <Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd>.
</Text>
Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

PropValuesDefault
variantraised, outline, subtle, plainraised
sizesm, md, lgmd
slotstringkbd

Public exports are Kbd, KbdProps, KbdVariant, and KbdSize.

Shared responsibility

Accessibility

Native kbd communicates keyboard input. Kbd adds no role, tab stop, or shortcut behavior. Forced colors restores a system-readable boundary for every variant.

Responsive behavior

Kbd stays inline and prevents one key label from wrapping. Sequences wrap between separately authored key hosts and separators.

Stable visual contract

Styling and tokens

Customization

Choose size and variant first, then documented variables for a deliberate local recipe.

Tokens and CSS hooks

Use .brick-kbd, data-slot, data-size, data-variant, --brick-kbd-background, --brick-kbd-foreground, --brick-kbd-border-color, --brick-kbd-border-block-end-color, --brick-kbd-radius, --brick-kbd-font-family, --brick-kbd-font-size, --brick-kbd-font-weight, --brick-kbd-line-height, --brick-kbd-letter-spacing, --brick-kbd-min-block-size, --brick-kbd-padding-inline, and --brick-kbd-shadow.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.
Source docsChangelogPlayground