Kbd
Displays keyboard shortcuts and key combinations in a styled inline element, ideal for documentation, tooltips, and menu hints where users need to identify keyboard interactions.
Default
The default
Kbd component renders a <kbd> element styled with a muted background, border, and rounded corners. Use the Keys parameter to display key names like Ctrl+C, which are automatically parsed and styled.Key Combinations
Compose multi-key shortcuts by placing separate
Kbd elements with + separators between them. This pattern provides more visual clarity than a single Keys="Ctrl+S" by giving each key its own distinct styled element.Sizes
Use the
Size parameter to control the key element dimensions. Choose from KbdSize.Small for inline menu hints, KbdSize.Default for standard documentation, and KbdSize.Large for prominent keyboard reference sections.Custom Content
Use
ChildContent instead of Keys to render custom content such as Unicode symbols, icons, or platform-specific key glyphs. This is useful for the Command key symbol or other characters that cannot be expressed as plain text.In Context
A real-world pattern showing keyboard shortcuts alongside action descriptions in a shortcut reference list. Use
KbdSize.Small for compact inline display and justify-between layout to align descriptions on the left and keys on the right.