Kbd

A typography component that formats keyboard inputs, shortcuts, or hotkeys.

Usage

⌘

Shift

Sizes

Use the kbd-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available font size utilities, visit Tailwind

Shift

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Shift

Customizing

globals.css


:root {
  --ex-kbd-font-size-sm: var(--text-2xs);
  --ex-kbd-font-size-md: var(--text-xs);
  --ex-kbd-font-size-lg: var(--text-sm);
 
  --ex-kbd-font-family-sm: var(--font-mono);
  --ex-kbd-font-family-md: var(--font-mono);
  --ex-kbd-font-family-lg: var(--font-mono);
 
  --ex-kbd-font-weight-sm: var(--font-weight-normal)
  --ex-kbd-font-weight-md: var(--font-weight-normal)
  --ex-kbd-font-weight-lg: var(--font-weight-normal)
 
  --ex-kbd-height-sm: calc(var(--spacing) * 4);
  --ex-kbd-height-md: calc(var(--spacing) * 5);
  --ex-kbd-height-lg: calc(var(--spacing) * 6);
 
  --ex-kbd-px-sm: var(--spacing);
  --ex-kbd-px-md: var(--spacing);
  --ex-kbd-px-lg: var(--spacing);
 
  --ex-kbd-radius-sm: var(--radius-sm);
  --ex-kbd-radius-md: var(--radius-sm);
  --ex-kbd-radius-lg: var(--radius-sm);
 
  --ex-kbd-shadow-sm: var(--shadow-xs);
  --ex-kbd-shadow-md: var(--shadow-xs);
  --ex-kbd-shadow-lg: var(--shadow-xs);
}

API

Element	Selector
`Kbd`	`.ex-kbd`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`