Renders an array of key names as a keyboard shortcut combination.
import React from 'react';
import { KeyboardShortcut } from '@minddrop/ui';
export const KeyboardShortcutDemo = () => (
<div style={{ display: 'flex', alignItems: 'center' }}>
{typeof window !== 'undefined' && (
<KeyboardShortcut keys={['Ctrl', 'N']} color="contrast" />
)}
</div>
);
export default KeyboardShortcutDemo;
Import the component from the @minddrop/ui package.
'Ctrl' and 'Alt' keys will render as ⌘ and ⌥ respectively on Macs.
import { KeyboardShortcut } from '@minddrop/ui';
export default () => {
return <KeyboardShortcut color="contrast" keys={['Ctrl', 'N']} />;
};
KeyboardShortcutProps extends TextProps.
| Prop | Type | Default |
|---|---|---|
keys* | string[] |