Kbd
Keyboard key indicators styled as mini capsules in the Tinted Trays design system. Clean, tactile appearance with subtle depth.
Basic Keys
Single keyboard keys displayed as small capsule elements with subtle borders and shadows.
Kbd Sizes
Two size options for different contexts.
Modifier Keys
Common modifier keys with icons for better recognition.
Key Combinations
Use KbdGroup to display keyboard shortcuts with multiple keys.
Complex Shortcuts
Multi-key combinations for advanced actions.
Inline with Text
Keyboard indicators naturally blend with surrounding text.
Press Enter to submit the form, or use Enter to submit without validation. Use Tab to navigate between fields and Esc to close the modal.
Keyboard Shortcuts Panel
A complete shortcuts reference panel using the tray and capsule pattern.
With Button Actions
Keyboard shortcuts integrated with button actions.
Action Bar Pattern
A contextual action bar showing available shortcuts.