advanced

Kbd

Keyboard key indicator component.

Preview

A preview of the Kbd component with interactive controls.

Preview Code
⌘K
Ctrl+C
⇧⌘P
EnterEsc
Interactive

Installation

Add the Kbd component to your project.

Bash
ng g @ng-cn/core:c kbd

Usage

Import and use the Kbd component in your Angular application.

Template TypeScript
template.html
<div class="flex flex-wrap items-center gap-4">
  <div class="flex items-center gap-1">
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </div>
  <div class="flex items-center gap-1">
    <Kbd>Ctrl</Kbd>
    <span class="text-muted-foreground">+</span>
    <Kbd>C</Kbd>
  </div>
  <div class="flex items-center gap-1">
    <Kbd>⇧</Kbd>
    <Kbd>⌘</Kbd>
    <Kbd>P</Kbd>
  </div>
  <Kbd>Enter</Kbd>
  <Kbd>Esc</Kbd>
</div>

Examples

Explore different variations and use cases for the Kbd component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
class string — Additional CSS classes.