#VHotkey API

Applies utility border classes to the component. To use it, you need to omit the border- prefix, (for example use border-sm as border="sm"). Find a list of the built-in border classes on the borders page.

Applies specified color to the control - supports utility colors with or without text- prefix (for example success, purple or text-purple) or CSS color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page.

Applies a disabled visual state to the component.

Controls how keyboard keys are visually represented. Affects the entire component’s appearance:

• icon: Uses SVG icons for keys when appropriate (default)
• symbol: Uses Unicode symbols (⌘, ⌃, ⇧, ⌥) - Allows you to manage presentation of modifier keys with fonts
• text: Uses full text labels (Command, Control, Shift, Alt) - most accessible and descriptive

Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.

Optimizes the component for seamless integration within text content and documentation. Applies compact styling with baseline alignment, constrained height (1lh), and responsive typography that inherits from parent text. Ideal for help documentation, tooltips, and instructional content. When using multiple inline hotkeys in the same paragraph, increase line-height to prevent visual overlap on text wrapping.

Custom key mapping object that defines how individual keys should be displayed. Users can import and modify the exported hotkeyMap to create custom configurations. Each key maps to a PlatformKeyConfig object with:

{
  mac?: { symbol?: string, icon?: string, text: string },
  default: { symbol?: string, icon?: string, text: string }
}

Usage Example:

import { hotkeyMap } from 'vuetify/labs/VHotkey'

const customKeyMap = {
  ...hotkeyMap,
  'custom-key': {
    default: { text: 'Custom', icon: 'custom-icon' },
    mac: { text: 'Custom', symbol: '⚡' }
  }
}

This enables:

• Custom key definitions: Add support for application-specific keys
• Localization: Override text representations for different languages
• Brand customization: Change how modifier keys appear
• Platform-specific styling: Different representations for Mac vs other platforms

Recommended to set at the application level via component defaults rather than per-instance for consistency.

String representing keyboard shortcuts to display. Supports multiple formats:

• Single keys: "k", "enter", "escape"
• Key combinations: "ctrl+k", "meta+shift+p", "alt+arrowup"
• Sequential actions: "ctrl+k-then-p" (use dash for ‘then’ relationships)
• Multiple shortcuts: "ctrl+k meta+p" (space-separated for alternative shortcuts)

Supports platform-aware key names like meta (becomes Cmd on Mac, Ctrl on PC) and alt (becomes Option on Mac).

Controls platform-specific rendering behavior for keyboard shortcuts. Accepts three values:

• 'auto' (default): Automatically detects the user’s platform based on user agent and renders appropriately
• 'mac': Forces Mac-style rendering (Command symbols, icons, Option key, etc.)
• 'pc': Forces PC-style rendering (Ctrl text, Alt key, etc.)

This is particularly useful for:

• Cross-platform testing: Verify how shortcuts appear on different platforms
• Design consistency: Ensure specific platform rendering in demos and prototypes
• Development workflow: Test platform-specific behaviors without switching devices
• Documentation: Show platform-specific examples in help content

Text to display before the hotkey.

Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.

Text to display after the hotkey.

Specify a theme for this component and all of its children.

Removes any applied border-radius from the component.

Controls the visual style and presentation of the hotkey component. Supports standard Vuetify variants plus a special contained variant:

Standard Variants (apply styling to individual key elements):

• elevated (default): Raised appearance with shadow, good for standalone hotkey displays
• flat: Solid background without shadow, clean and minimal
• tonal: Subtle tinted background without border, balances visibility with restraint
• outlined: Border-only styling without elevation, lightweight and unobtrusive
• text: Minimal styling with text color emphasis only, blends with content
• plain: No background or border, most subtle option

Special Variant (different visual structure):

• contained: Follows MDN’s nested <kbd> pattern - wraps all keys in a single styled container with unstyled nested elements. Creates a cohesive visual unit that clearly groups related keys together. Cannot be combined with standard variants. Ideal for complex key combinations where you want to show the entire sequence as one unit.

The default Vue slot. Not supported.