A keyboard key drawn as a key: the Ctrl K beside a search field, the ? in a shortcuts dialog, the keys in a tooltip. It is purely visual and registers no handler. One element is one key, so a chord or a sequence is several elements with the + or space the author writes between them.
import { Component } from "@angular/core";
import { SuiKbd } from "@shineui/angular";
@Component({
standalone: true,
imports: [SuiKbd],
template: `<sui-kbd>?</sui-kbd>`,
})
export class Example { }
Basic
A real kbd element with the text you wrote, so a screen reader reads the key by name. The element is visual only and registers no shortcut.
Press ? for the shortcuts and Esc to close them.
<p style="margin:0;font:460 14px/1.6 var(--font-sans);color:var(--ink)">Press <sui-kbd>?</sui-kbd> for the shortcuts and <sui-kbd>Esc</sui-kbd> to close them.</p>
Chords and sequences
One element is one key. Write a chord as elements joined by a plus and a sequence as elements separated by a space; the slot stays literal, so the separator you write is the one the reader sees.
Ctrl+KOpen the command paletteGIGo to the inboxShift+F10Open the row menuEnterOpen the focused row
<div style="display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:center;max-width:360px;font:460 13px/1.4 var(--font-sans);color:var(--ink)">
<span style="display:inline-flex;align-items:center;gap:4px;color:var(--ink-muted)"><sui-kbd>Ctrl</sui-kbd>+<sui-kbd>K</sui-kbd></span><span>Open the command palette</span>
<span style="display:inline-flex;align-items:center;gap:4px"><sui-kbd>G</sui-kbd> <sui-kbd>I</sui-kbd></span><span>Go to the inbox</span>
<span style="display:inline-flex;align-items:center;gap:4px;color:var(--ink-muted)"><sui-kbd>Shift</sui-kbd>+<sui-kbd>F10</sui-kbd></span><span>Open the row menu</span>
<span style="display:inline-flex;align-items:center;gap:4px"><sui-kbd>Enter</sui-kbd></span><span>Open the focused row</span>
</div>
Sizes and quiet
md is the key a user reads in a dialog; sm is the 18px box for a small control. Both carry 11px type in the muted ink, so either clears the text floor. quiet is the reminder inside a control: no fill and no strong edge, on the control's own ground, for a shortcut the dialog also lists.
The end slot of sui-icon-field holds the hint inside the field's edge, and quiet alone is the shape: the 20px key sits centered in a 34px field. Add size="sm" only in a 28px control. A click on the hint puts the caret in the input; the key is aria-hidden because the shortcut is documented where the user can read it.
A quieter key for a hint inside a field or a button, where the shortcut is a reminder and the dialog carries the full reading: no fill and no strong edge, on the control's own ground, in the same muted ink as the reading key so it still clears the text floor. Leave it off for a key the user must read.
size
size
"md" | "sm"
'md'
Key height: sm is 18px for a hint in a small control, md is 20px. Both carry 11px type, the smallest the muted ink reads at; the box is what changes.
tone
tone
"inverse" | undefined
inverse inks the key for the brand chrome, the meaning the tone carries on every element that takes it.
Slots
Slot
Description
(default)
The key's text, rendered literally inside a real kbd: Ctrl, ?, Enter. Put one key per element and write the + or the space of a chord or sequence between elements.
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.