Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Keyboard

Kbd displays keyboard keys and shortcut hints. Use ngs-kbd for one key such as , Shift, K, or Esc, and use ngs-kbd-group to show a key combination with plus signs between keys.

Use it in menus, command palettes, toolbars, help text, onboarding, and documentation when users need to see the shortcut for an action. Kbd is visual only; it does not register or handle keyboard events.

Do not use Kbd as a clickable button, status badge, tag, chip, normal body text, or shortcut handler. Use Button, IconButton, Badge, Chips, normal text, or application keyboard handling for those cases.

The NgStarter Angular Kbd component lets you display visual keyboard keys and shortcut hints. Use ngs-kbd for a single key such as Cmd, Shift, K, Esc, or an arrow key, and ngs-kbd-group for key combinations with plus signs between keys. It includes examples for Basic Keyboard, Keyboard group, Keyboard in menu, and Basic kbd.

Basic Keyboard

Use ngs-kbd to show one keyboard key in help text, menus, and shortcut hints.

+
+
+
+

Keyboard group

Use ngs-kbd-group for key combinations such as Command + Shift + K.

+
+
+
+
+

Keyboard in menu

Place Kbd hints beside menu actions when the action has a real keyboard shortcut handled elsewhere.