Keyboard Key
Keyboard key can be used to let users know which keys some action signifies.
Kbd- The Keyboard key component.
import { Kbd } from "@dreamy-ui/react/rsc";You can press action key and i to toggle the color mode.
^i
<Kbd>^i</Kbd>The Kbd component comes in three sizes: small, medium (default), and large.
Esc
Enter
Space
<Kbd size="sm">Esc</Kbd>
<Kbd size="md">Enter</Kbd>
<Kbd size="lg">Space</Kbd>You can utilize useActionKey hook to get the platform specific action key. Returns "⌘" for MacOS and "Ctrl" for other platforms.
Ctrl + K
import { useActionKey } from "@dreamy-ui/react";
const actionKey = useActionKey();
<Kbd>{actionKey} + K</Kbd>