Skip to content

Hotkey Badge

DisplayMIT
View in Storybook

Compact keyboard shortcut chip — ⌘K, ⇧⌘P, etc.

bun add @otfdashkit/ui

Preview

Hotkey Badge
Loading Storybook preview…

Code

import { HotkeyBadge } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="flex flex-wrap gap-2 items-center">
      <HotkeyBadge>⌘</HotkeyBadge>
      <HotkeyBadge>K</HotkeyBadge>
      <HotkeyBadge>Enter</HotkeyBadge>
      <HotkeyBadge>Esc</HotkeyBadge>
      <HotkeyBadge>⇧</HotkeyBadge>
      <HotkeyBadge>⌥</HotkeyBadge>
    </div>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the HotkeyBadge source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
childrenrequiredReactNode
classNamestring