Default Kbd for Vue

Kbd has no size prop. Its classes make it 20 to 22 pixels tall depending on the style, with a matching minimum width so single characters stay square, extra-small medium-weight type and small horizontal padding. The cap grows wider to fit a word such as Ctrl.

Almost always. The default fits menu items, tooltips, buttons, inputs and running text. Use smaller caps only where space is tight, like a dense status bar, and larger ones where the shortcut is the subject, like a hero or a tutorial.

For a short hint next to a control, yes: the text is the same extra-small size used for labels across the components. If the shortcut is the main content of a page, or people will read it from a distance, use a larger size.

Edit the classes in your copy of the Kbd component, since it lives in your project. Changing them once updates every key cap, which is better than adding size classes at every use.

Kbd uses extra-small type so it sits inside small text, menu items and tooltips without pushing the line apart. Next to larger body text it reads a little smaller, which helps it look like a key rather than a word.

KbdGroup puts a small gap between the keys of one shortcut, as here. Leave a wider gap, or a word like then, between separate shortcuts so they don't read as one chord.