Components

Keyboard key

Keys and key combinations drawn as physical caps - for documentation, tooltips and menu hints, anywhere the reader has to tell a key they press from the prose around it.

A key, and a combination

A combination is written as one string and split for you. Each key gets its own cap inside an outer kbd, which is what the HTML spec prescribes for a chord - and what stops the whole thing reading as one long pill.

Press Esc to close, or Ctrl+Shift+P to open the command palette.

razor

Press <VetoKbd Keys="Esc" /> to close, or
<VetoKbd Keys="Ctrl+Shift+P" /> to open the command palette.

Sizes

Small is the one that runs inline inside body text without pushing the lines apart - which is the common case, and why a shortcut row defaults to it. Medium and large suit a standalone hint or a key being taught rather than mentioned.

Inline in a sentence, the small size sits on the line: press Ctrl+K and carry on reading.

Ctrl+K Ctrl+K Ctrl+K

razor

<VetoKbd Keys="Ctrl+K" Size="VetoSize.Small" />
<VetoKbd Keys="Ctrl+K" Size="VetoSize.Medium" />
<VetoKbd Keys="Ctrl+K" Size="VetoSize.Large" />

Symbols

Symbols swaps the modifiers that have a conventional glyph - ⌘ for Cmd, ⇧ for Shift, ⌥ for Alt. It looks right on a Mac, but a screen reader makes a poor job of reading a glyph aloud, so it is off unless you ask for it.

Cmd+Shift+Enter ⌘+⇧+↵

razor

<VetoKbd Keys="Cmd+Shift+Enter" />
<VetoKbd Keys="Cmd+Shift+Enter" Symbols="true" />

One string for both platforms

Mod is the platform's main modifier: Ctrl by default, Cmd when Mac is set. Write Mod+S once and flip Mac from whatever you already know about the user's machine.

Ctrl+S Cmd+S ⌘+⇧+S

razor

<VetoKbd Keys="Mod+S" />                              @* Ctrl + S *@
<VetoKbd Keys="Mod+S" Mac="true" />                   @* Cmd + S *@
<VetoKbd Keys="Mod+Shift+S" Mac="true" Symbols="true" /> @* ⌘ + ⇧ + S *@

Separators

The separator is both what the string is split on and what is drawn between the caps, so a combination written with a different character still parses. Doubled, it is the key itself: Ctrl++ is Ctrl and Plus. Turn it off entirely for keys that simply sit next to each other - the vim-style two-key sequence, where no key is held.

Ctrl+Alt+Del Ctrl-Alt-Del gg Ctrl++

razor

<VetoKbd Keys="Ctrl+Alt+Del" />
<VetoKbd Keys="Ctrl-Alt-Del" Separator="-" />
<VetoKbd Keys="Ctrl++" />  @* the plus key itself *@

@* Pressed one after the other, not held together: *@
<VetoKbd Keys="g+g" ShowSeparator="false" />

Without the cap

Bordered false drops the border and the raised edge, leaving the key as tinted text. For dense hints - a menu, a tooltip - where a row of little 3D caps is more furniture than the hint is worth.

Ctrl+Shift+P Ctrl+Shift+P

razor

<VetoKbd Keys="Ctrl+Shift+P" Bordered="false" />

A shortcut reference list

The real pattern: descriptions on the left, keys aligned down the right. A column of them is scannable because the eye runs down one column of keys rather than hunting for them at the end of sentences of different lengths. It is a description list underneath - each row really is a term and its definition - and the left/right layout sits on top of that rather than replacing it.

Open the command palette: Ctrl+K
Save the current file: Ctrl+S
Save everything: Ctrl+Alt+S
Find in this file: Ctrl+F
Find across the project: Ctrl+Shift+F
Close the tab: Ctrl+W
Reopen the tab you just closed: Ctrl+Shift+T

razor

<VetoShortcutList Divided="true">
    <VetoShortcut Description="Open the command palette" Keys="Ctrl+K" />
    <VetoShortcut Description="Save the current file"    Keys="Ctrl+S" />
    <VetoShortcut Description="Find across the project"  Keys="Ctrl+Shift+F" />
    <VetoShortcut Description="Reopen the tab you just closed" Keys="Ctrl+Shift+T" />
</VetoShortcutList>

A compact list

Size on the list sets how much room each row takes, which is what turns a reference page into a menu hint panel. The keys keep their own size independently.

Next result: Enter
Previous result: Shift+Enter
Dismiss: Esc

Next result: Enter
Previous result: Shift+Enter

razor

<VetoShortcutList Size="VetoSize.Small">
    <VetoShortcut Description="Next result" Keys="Enter" />
    <VetoShortcut Description="Dismiss" Keys="Esc" />
</VetoShortcutList>

Parameters

Parameter	Type	Default	Description
`Keys`	`string?`	`null`	The key or combination as one string, e.g. Ctrl+Shift+P.
`ChildContent`	`RenderFragment?`	`null`	A single key whose content needs markup, instead of Keys.
`Separator`	`string`	`"+"`	What Keys is split on, and what is drawn between the caps.
`ShowSeparator`	`bool`	`true`	Draw the separator character. Off for keys pressed in sequence.
`Symbols`	`bool`	`false`	Draw modifiers as their conventional glyphs (⌘, ⇧, ⌥).
`Mac`	`bool`	`false`	Draw the Mod key as Cmd rather than Ctrl.
`Size`	`VetoSize`	`Medium`	Small for running inline in body text.
`Bordered`	`bool`	`true`	False drops the border and the raised edge, leaving the key as tinted text.
`VetoShortcut`	`component`	`—`	One row: Description (or ChildContent) left, Keys (or KeysContent) right. Passes Separator, ShowSeparator, Symbols, Mac, Bordered and Size to its keys.
`VetoShortcutList`	`component`	`—`	The rows. Divided draws a hairline between them; Size sets the row height.