KeyboardButton

The KeyboardButton component is designed to display keyboard shortcuts in a visually appealing and accessible way. It supports displaying both regular keys and modifier keys (like ⌘, ⇧, CTRL, ⌥) in a consistent format.

Features

• Displays keyboard shortcuts with optional modifier keys
• Accessible with proper ARIA attributes
• Supports both light and dark themes
• Responsive design with mobile considerations
• Customizable through className prop

Props

The component also accepts all standard HTML div element props.

Usage

Default and Modifier Key

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div className="flex w-[300px] h-32 border border-gray-6 rounded-md justify-center items-center p-3 gap-2">
  <span className="text-gray-9 text-[13px]">
    Default
  </span>
  <KeyboardButton shortcut="D" />
  <span className="text-gray-9 text-[13px]">
    Modifier Key
  </span>
  <KeyboardButton
    className="w-full m-0 p-0 gap-2"
    modifierKey="⌘"
    shortcut="K"
  />
</div>

Accessibility

The component includes:

• Proper ARIA labels for screen readers
• Keyboard focus management
• Descriptive title attributes for tooltips

Design

The component features:

• Consistent padding and sizing
• Drop shadow effects
• Hover and focus states
• Dark mode support
• Responsive behavior (hidden on mobile devices)