KeyboardButton

Overview

The KeyboardButton component is designed to display keyboard shortcuts in a visually appealing and accessible way. It's built to support both regular keys and modifier keys (like ⌘, ⇧, CTRL, ⌥) in a consistent format that matches design system standards.

Usage

import { KeyboardButton } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <div>
      <KeyboardButton shortcut="D" />
      <KeyboardButton modifierKey="⌘" shortcut="K" />
      <KeyboardButton modifierKey="⇧" shortcut="S" />
    </div>
  );
}

Examples

Default and Modifier Key

Examples showing both regular keys and modifier key combinations.

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>

Features

• Modifier Key Support: Displays modifier keys (⌘, ⇧, CTRL, ⌥) with main shortcuts
• Accessibility: Built-in accessibility with proper ARIA attributes
• Theme Support: Supports both light and dark themes
• Responsive Design: Adapts to different screen sizes with mobile considerations
• Customizable: Extensive styling options through className prop
• Consistent Formatting: Maintains consistent visual appearance across the app

Props

The component also accepts all standard HTML span element props.

Structure

The KeyboardButton component is a simple, self-contained component that renders as a single span element with:

1. Modifier Key Display: Optional modifier key with proper spacing
2. Main Shortcut: The primary key being displayed
3. Styling Container: Consistent padding and visual treatment

Styling

The component features:

• Consistent padding and sizing across all instances
• Drop shadow effects for depth and visual separation
• Hover and focus states for better interaction
• Dark mode support with appropriate color schemes
• Responsive behavior (hidden on mobile devices)
• Customizable through className prop

Custom Styling

You can customize the appearance using the className prop:

<KeyboardButton 
  modifierKey="⌘" 
  shortcut="K"
  className="custom-keyboard-button"
/>

Accessibility

The component includes:

• ARIA Labels: Proper ARIA labels for screen readers
• Keyboard Focus: Keyboard focus management
• Descriptive Titles: Title attributes for tooltips
• Semantic Structure: Uses appropriate HTML elements
• Screen Reader Support: Announces keyboard shortcuts appropriately