Hotkey Badge
DisplayMITCompact keyboard shortcut chip — ⌘K, ⇧⌘P, etc.
bun add @otfdashkit/ui
Preview
Hotkey BadgeDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { 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.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | ||
| className | string |