You are viewing docs for an older version
This page documents v0.2. The latest version is v0.3.
Kbd
Displays keys and shortcuts; mod becomes Cmd on macOS and Ctrl everywhere else.
Qidiruvni ochish uchun CtrlK ni bosing, yopish uchun Esc.
'use client';
import { Kbd } from '@akhatmirzo/ui';
export default function KbdBasic() {
return (
<p className="text-sm text-text">
Qidiruvni ochish uchun <Kbd keys={['mod', 'K']} /> ni bosing, yopish uchun <Kbd>Esc</Kbd>.
</p>
);
}
Import
import { Kbd } from '@akhatmirzo/ui';When to use
- To show shortcuts — in menu items,
Tooltip,CommandPaletteand help text. - Use the
keysarray for combinations — each key is drawn separately andmodadapts to the operating system. - It only displays.
Kbddoesn't listen for key presses — useuseHotkeysfor that (see the example below). - Don't add a shortcut to every menu item — keep them for frequent actions.
Key list (keys)
Each item in keys is rendered separately. mod (case-insensitive) becomes ⌘ on macOS and
iOS and Ctrl everywhere else. For a single key, plain children is enough.
'use client';
import { Kbd } from '@akhatmirzo/ui';
export default function KbdKeys() {
return (
<div className="flex flex-wrap items-center gap-3">
<Kbd keys={['mod', 'K']} />
<Kbd keys={['mod', 'Shift', 'P']} />
<Kbd keys={['Alt', 'F4']} />
<Kbd>Esc</Kbd>
<Kbd>↵</Kbd>
<Kbd>↑</Kbd>
<Kbd>↓</Kbd>
</div>
);
}
SSR and mod
The platform is unknown on the server, so Ctrl renders first. In the browser it switches to ⌘
on Apple devices — without a hydration mismatch.
Sizes
sm (default) is 20px, for inline text and menus. md is 24px, for standalone use or next to
larger text.
'use client';
import { Kbd } from '@akhatmirzo/ui';
export default function KbdSizes() {
return (
<div className="flex flex-wrap items-center gap-3">
<Kbd keys={['mod', 'C']} />
<Kbd size="md" keys={['mod', 'C']} />
</div>
);
}
In a menu
The most common case — a shortcut on the right side of a menu item.
- Nusxa olishCtrlC
- Qo'yishCtrlV
- Hammasini tanlashCtrlA
'use client';
import { Kbd } from '@akhatmirzo/ui';
const items = [
{ label: 'Nusxa olish', keys: ['mod', 'C'] },
{ label: "Qo'yish", keys: ['mod', 'V'] },
{ label: 'Hammasini tanlash', keys: ['mod', 'A'] },
];
export default function KbdMenu() {
return (
<ul className="flex w-64 flex-col rounded-lg border border-border bg-surface p-1 text-sm text-text">
{items.map((item) => (
<li key={item.label} className="flex items-center justify-between rounded-md px-2 py-1.5">
{item.label}
<Kbd keys={item.keys} />
</li>
))}
</ul>
);
}
Wiring up the shortcut
Kbd and useHotkeys from @akhatmirzo/hooks follow the same mod rule, so the key you show
always matches the key you listen for.
import { useHotkeys } from '@akhatmirzo/hooks';
import { Kbd } from '@akhatmirzo/ui';
import { useState } from 'react';
export function SearchHint() {
const [open, setOpen] = useState(false);
useHotkeys('mod+k', () => setOpen(true));
return (
<p>
Search: <Kbd keys={['mod', 'K']} /> {open && '— opened'}
</p>
);
}Props
Kbd accepts every other <kbd> attribute (className, title, data-* ...).
| Prop | Type | Default | Description |
|---|---|---|---|
keys | string[] | — | Key sequence; 'mod' is ⌘ on macOS and Ctrl elsewhere. When set, children are ignored |
size | 'sm' | 'md' | 'sm' | Height: 20 / 24px |
children | ReactNode | — | Content shown when keys is not set |
The root element has a data-size attribute. kbdVariants is also exported if you need the
styles on another element.
Accessibility
- A semantic
<kbd>element marks the content as keyboard input. - Symbols (
⌘,↵,↑) aren't always read clearly by screen readers. For important instructions, write the word instead:<Kbd>Enter</Kbd>.