Kbd — uicraft

Default

Single keyboard keys displayed inline.

html

Shift Ctrl Alt ⌘ Enter Space Tab Esc

<kbd class="uc-inline-flex uc-items-center uc-justify-center uc-rounded-lg uc-border uc-border-border-default uc-bg-neutrals-muted uc-px-2 uc-py-1 uc-text-xs uc-font-mono uc-font-medium uc-shadow-sm">
  Shift
</kbd>

Key Combinations

Keyboard shortcut combinations for common actions.

html

⌘ + C Copy

⌘ + V Paste

⌘ + Z Undo

⌘ + ⇧ + Z Redo

Ctrl + Alt + Delete

<div class="uc-flex uc-items-center">
  <kbd class="uc-inline-flex uc-items-center uc-justify-center uc-rounded-lg uc-border uc-border-border-default uc-bg-neutrals-muted uc-px-2 uc-py-1 uc-text-xs uc-font-mono uc-font-medium uc-shadow-sm">&#8984;</kbd>
  <span class="uc-text-xs uc-text-fg-disabled uc-mx-1">+</span>
  <kbd class="uc-inline-flex uc-items-center uc-justify-center uc-rounded-lg uc-border uc-border-border-default uc-bg-neutrals-muted uc-px-2 uc-py-1 uc-text-xs uc-font-mono uc-font-medium uc-shadow-sm">C</kbd>
  <span class="uc-text-xs uc-text-fg-disabled uc-ml-2">Copy</span>
</div>

Sizes

Keys available in three different sizes.

html

Small

⌘ K

Default

⌘ K

Large

⌘ K

<!-- Small -->
<kbd class="... uc-px-1.5 uc-py-0.5 uc-text-[10px] ...">&#8984;</kbd>

<!-- Default -->
<kbd class="... uc-px-2 uc-py-1 uc-text-xs ...">&#8984;</kbd>

<!-- Large -->
<kbd class="... uc-px-3 uc-py-1.5 uc-text-sm ...">&#8984;</kbd>

In Context

Keyboard shortcuts shown inline within descriptive text.

html

Press ⌘ K to open command palette

Use ↑ ↓ to navigate, Enter to select

Press Esc to close

<p class="uc-text-sm">
  Press
  <kbd class="uc-inline-flex ... uc-mx-0.5">&#8984;</kbd>
  <kbd class="uc-inline-flex ... uc-mx-0.5">K</kbd>
  to open command palette
</p>

Shortcut Table

A reference table of common keyboard shortcuts.

html

Action	Shortcut
Copy	`⌘` `C`
Paste	`⌘` `V`
Cut	`⌘` `X`
Undo	`⌘` `Z`
Save	`⌘` `S`
Find	`⌘` `F`

<table class="uc-w-full uc-max-w-md uc-text-sm">
  <thead>
    <tr class="uc-border-b uc-border-border-default">
      <th class="uc-text-left uc-py-3 uc-px-4">Action</th>
      <th class="uc-text-right uc-py-3 uc-px-4">Shortcut</th>
    </tr>
  </thead>
  <tbody>
    <tr class="uc-border-b uc-border-border-default">
      <td class="uc-py-3 uc-px-4">Copy</td>
      <td class="uc-py-3 uc-px-4 uc-text-right">
        <kbd>&#8984;</kbd> <kbd>C</kbd>
      </td>
    </tr>
  </tbody>
</table>

API Reference

All CSS classes available for the Kbd component.

Class	Type	Description
`uc-inline-flex uc-items-center uc-justify-center`	Layout	Inline flex centering for key content
`uc-rounded-lg`	Shape	Rounded corners for key cap appearance
`uc-border uc-border-border-default`	Border	Subtle border to define key edges
`uc-bg-neutrals-muted`	Color	Muted background simulating a physical key cap
`uc-font-mono uc-font-medium`	Typography	Monospace font for consistent key label widths
`uc-shadow-sm`	Effect	Subtle shadow for raised key appearance
`uc-px-1.5 uc-py-0.5 uc-text-[10px]`	Size	Small key size variant
`uc-px-2 uc-py-1 uc-text-xs`	Size	Default key size
`uc-px-3 uc-py-1.5 uc-text-sm`	Size	Large key size variant

Accessibility

Keyboard and screen reader support.

Feature	Details
Semantics	Use kbd element for keyboard input references
Screen readers	Consider aria-label for key combinations, e.g. aria-label="Control plus S"
Decorative	If used purely for visual styling, ensure meaning is also conveyed in text