Run the CLI
Use the CLI to add the component to your project.
npx @ngzard/ui@latest add kbdKbd
Display keyboard keys and shortcuts in a visually consistent way. Useful for documentation, tooltips, command palettes, and UI hints showing keyboard shortcuts.
import { Component } from '@angular/core';
import { ZardButtonComponent } from '../../button/button.component';
import { ZardKbdComponent } from '../kbd.component';
@Component({
selector: 'z-demo-kbd-default',
imports: [ZardKbdComponent, ZardButtonComponent],
standalone: true,
template: `
<div class="flex flex-col items-center justify-center gap-4">
<div class="flex items-center gap-2">
<z-kbd>Esc</z-kbd>
<z-kbd>⌘</z-kbd>
<z-kbd>Ctrl</z-kbd>
</div>
<button type="submit" z-button zType="outline">Submit <z-kbd class="ml-2">Enter</z-kbd></button>
</div>
`,
})
export class ZardDemoKbdDefaultComponent {}
Installation
Add the component files
Create the component directory structure and add the following files to your project.
Examples
default
import { Component } from '@angular/core';
import { ZardButtonComponent } from '../../button/button.component';
import { ZardKbdComponent } from '../kbd.component';
@Component({
selector: 'z-demo-kbd-default',
imports: [ZardKbdComponent, ZardButtonComponent],
standalone: true,
template: `
<div class="flex flex-col items-center justify-center gap-4">
<div class="flex items-center gap-2">
<z-kbd>Esc</z-kbd>
<z-kbd>⌘</z-kbd>
<z-kbd>Ctrl</z-kbd>
</div>
<button type="submit" z-button zType="outline">Submit <z-kbd class="ml-2">Enter</z-kbd></button>
</div>
`,
})
export class ZardDemoKbdDefaultComponent {}
group
import { Component } from '@angular/core';
import { ZardKbdGroupComponent } from '../kbd-group.component';
import { ZardKbdComponent } from '../kbd.component';
@Component({
selector: 'z-demo-kbd-group',
imports: [ZardKbdGroupComponent, ZardKbdComponent],
standalone: true,
template: `
<z-kbd-group>
Use <z-kbd>Ctrl + K</z-kbd> or <z-kbd>Ctrl + O</z-kbd>
to open menu
</z-kbd-group>
`,
})
export class ZardDemoKbdGroupComponent {}