Kbd
Used to display textual user input from keyboard.
⌘⇧⌥⌃Ctrl+B
import { Component } from '@angular/core';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';
@Component({
selector: 'spartan-kbd-preview',
imports: [HlmKbdImports],
template: `
<div class="flex flex-col items-center gap-4">
<kbd hlmKbdGroup>
<kbd hlmKbd>⌘</kbd>
<kbd hlmKbd>⇧</kbd>
<kbd hlmKbd>⌥</kbd>
<kbd hlmKbd>⌃</kbd>
</kbd>
<kbd hlmKbdGroup>
<kbd hlmKbd>Ctrl</kbd>
<span>+</span>
<kbd hlmKbd>B</kbd>
</kbd>
</div>
`,
})
export class KbdPreview {}Installation
npx nx g @spartan-ng/cli:ui kbd
ng g @spartan-ng/cli:ui kbd
Usage
import { HlmKbdImports } from '@spartan-ng/helm/kbd';<kbd hlmKbd>⌘</kbd>Helm API
HlmKbdGroup
Selector: kbd[hlmKbdGroup]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmKbd
Selector: kbd[hlmKbd]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
Examples
Group
Use the HlmKbdGroup component to group keyboard keys together.
Use Ctrl + BCtrl + K to open the command palette
import { Component } from '@angular/core';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';
@Component({
selector: 'spartan-kbd-group-preview',
imports: [HlmKbdImports],
template: `
<div class="flex flex-col items-center gap-4">
<p class="text-muted-foreground text-sm">
Use
<kbd hlmKbdGroup>
<kbd hlmKbd>Ctrl + B</kbd>
<kbd hlmKbd>Ctrl + K</kbd>
</kbd>
to open the command palette
</p>
</div>
`,
})
export class KbdGroupPreview {}Button
Use the HlmKbd component inside a HlmBtn to display a keyboard key inside a button.
import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';
@Component({
selector: 'spartan-kbd-button-preview',
imports: [HlmKbdImports, HlmButtonImports],
template: `
<div class="flex flex-wrap items-center gap-4">
<button hlmBtn variant="outline" size="sm" class="pr-2">
Accept
<kbd hlmKbd>⏎</kbd>
</button>
<button hlmBtn variant="outline" size="sm" class="pr-2">
Cancel
<kbd hlmKbd>Esc</kbd>
</button>
</div>
`,
})
export class KbdButtonPreview {}