Kbd
A keycap for a key the reader presses, rendered on the server. A combination is sibling keys, with no group part and no plus.
Kbd
server - 0 KBA keycap for a key the reader presses, rendered on the server. A combination is sibling keys, with no group part and no plus.
The code
import { Kbd } from 'topclassui/kbd'
export default function Demo() {
return (
<div className="flex flex-wrap items-center gap-3">
<Kbd>K</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Ctrl</Kbd>
<Kbd>Shift</Kbd>
<Kbd>Enter</Kbd>
<Kbd>Esc</Kbd>
</div>
)
}
An icon inside a key is an <Svg> with no size: at its 1em default it follows the key's own text.
Import from the package
import { Kbd } from 'topclassui/kbd'Install once:npm i topclassui@beta zod
Examples
- To name a key the reader presses, inside running text or beside a menu item. It is one
<kbd>with a keycap look and no props of its own. - A combination is sibling keys separated by a space. For the nested form of the HTML spec, wrap the keys in a plain
<kbd>yourself.
import { Kbd } from 'topclassui/kbd'
export default function Demo() {
return (
<div className="flex flex-wrap items-center gap-3">
<Kbd>K</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Ctrl</Kbd>
<Kbd>Shift</Kbd>
<Kbd>Enter</Kbd>
<Kbd>Esc</Kbd>
</div>
)
}
Press Ctrl K to open the command palette.
Press Shift Tab to move focus backwards.
import { Kbd } from 'topclassui/kbd'
/** The two pairs the Components page captions, as sibling keys on a raised card: no group, no plus. */
export default function Demo() {
return (
<div className="flex flex-col gap-3 rounded-box border border-line bg-surface-raised p-4 text-sm text-body">
<p>Press <Kbd>Ctrl</Kbd> <Kbd>K</Kbd> to open the command palette.</p>
<p>Press <Kbd>Shift</Kbd> <Kbd>Tab</Kbd> to move focus backwards.</p>
</div>
)
}
Press K to open the command palette.
import { command } from 'topclassui/icons/command'
import { Svg } from 'topclassui/svg'
import { Kbd } from 'topclassui/kbd'
/** The docs sample: the icon takes no size, so at its 1em default it follows the key's text. */
export default function Demo() {
return (
<p className="text-sm text-body">
Press <Kbd><Svg icon={command} label="Command" /></Kbd> <Kbd>K</Kbd> to open the command palette.
</p>
)
}
Press Shift Tab to move focus backwards.
import { Kbd } from 'topclassui/kbd'
/** The nested form of the HTML spec: a plain outer kbd the caller writes. It stays inline, so its
* keys follow the sentence in both directions, as sibling keys do. */
export default function Demo() {
return (
<p className="text-sm text-body">
Press <kbd className="whitespace-nowrap"><Kbd>Shift</Kbd> <Kbd>Tab</Kbd></kbd> to move focus backwards.
</p>
)
}
اضغط Ctrl K لفتح لوحة الأوامر.
اضغط Shift Tab للرجوع إلى العنصر السابق.
import { Kbd } from 'topclassui/kbd'
export default function Demo() {
return (
<div dir="rtl" lang="ar" className="flex flex-col gap-3 text-sm text-body">
<p>اضغط <Kbd>Ctrl</Kbd> <Kbd>K</Kbd> لفتح لوحة الأوامر.</p>
<p>اضغط <Kbd>Shift</Kbd> <Kbd>Tab</Kbd> للرجوع إلى العنصر السابق.</p>
</div>
)
}
Props
No props of its own: it takes the attributes of the element it renders.
Keyboard and accessibility
Nothing to operate: it is not interactive on its own.
- It is not a control: it takes no focus and has no states.
- A screen reader reads the key's text, so give an icon key a text name of its own, as
with-iconnames its icon "Command".
Right to left
Key names stay in Latin; the keys of a combination follow the sentence, so in Arabic the first key sits at the right.
Server and client
Renders on the server and ships no JavaScript.
Files: index.tsx.
On the chip: server - 0 KB.