Kbd
JavaScript off: what the HTML and CSS do on their own.
A key or a key combination, as people type it: kbd elements, nested for a combination the way the HTML spec describes. Sized in em, so it fits the text around it.
Usage
Press <Kbd>Esc</Kbd> to close.
<Kbd Keys="Ctrl+K" />
<Kbd Keys="⌘+Shift+P" />Keys and combinations
Use Keys for a combination such as "Ctrl+K": each key gets its own box.
Preview
Press Esc to close the dialog.
Search with Ctrl+K, or open the command list with Ctrl+Shift+P.
Zoom in with Ctrl++.
Code
<Stack Gap="3" Grow>
<TextBlock>Press <Kbd>Esc</Kbd> to close the dialog.</TextBlock>
<TextBlock>Search with <Kbd Keys="Ctrl+K" />, or open the command list with <Kbd Keys="Ctrl+Shift+P" />.</TextBlock>
<TextBlock Size="TextSize.Sm" Color="Color.Muted">Zoom in with <Kbd Keys="Ctrl++" />.</TextBlock>
</Stack>Separator
Use Separator to change what's shown between the keys: a word for a sequence, or nothing for a Mac shortcut.
Preview
Go to your inbox with GthenI.
Save with ⌘S.
Code
<Stack Gap="3" Grow>
<TextBlock>Go to your inbox with <Kbd Keys="G+I" Separator="then" />.</TextBlock>
<TextBlock>Save with <Kbd Keys="⌘+S" Separator="" />.</TextBlock>
</Stack>Mode support
| Feature | Off | Static | Live |
|---|---|---|---|
| Everything | Yes | Yes | Yes |
Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).
Accessibility
- It renders a
kbd; a combination is akbdholding onekbdper key, as the HTML spec describes. - Keys and the
Separatorare plain text, so screen readers read them as written.
Parameters
| Prop | Type | Default |
|---|---|---|
ChildContentOne key, such as "Esc". | RenderFragment? | |
KeysA combination, keys joined with "+", such as "Ctrl+K" or "Ctrl+Shift+P". | string? | |
SeparatorWhat's shown between the keys of a combination. | string | "+" |
Plus 16 item props and 4 common props.
Full API