Kbd

Display keyboard shortcuts and key combinations. Apply av-kbd to a <kbd> host with av-kbd-abbr and av-kbd-content children.

Import

import { AvKbdImports } from '@avesra/angular';

Usage

⌘K⇧P⌃C⌥D

import { Component } from '@angular/core';
import { AvKbdImports } from '@avesra/angular';

@Component({
  selector: 'app-kbd-basic-demo',
  imports: [AvKbdImports],
  template: `<div class="flex items-center gap-4">
  <kbd av-kbd>
    <abbr av-kbd-abbr key-value="command"></abbr>
    <span av-kbd-content>K</span>
  </kbd>
  <kbd av-kbd>
    <abbr av-kbd-abbr key-value="shift"></abbr>
    <span av-kbd-content>P</span>
  </kbd>
  <kbd av-kbd>
    <abbr av-kbd-abbr key-value="ctrl"></abbr>
    <span av-kbd-content>C</span>
  </kbd>
  <kbd av-kbd>
    <abbr av-kbd-abbr key-value="option"></abbr>
    <span av-kbd-content>D</span>
  </kbd>
</div>`,
})
export class KbdBasicDemo {}

Anatomy

Import the Kbd parts and compose them with attribute selectors on <kbd>, <abbr>, and <span> hosts.

<kbd av-kbd>
  <abbr av-kbd-abbr key-value="command"></abbr>
  <span av-kbd-content>K</span>
</kbd>

Variants

Set variant on av-kbd. Default and light are shown side by side.

Copy:⌘C⌘C

Paste:⌘V⌘V

Cut:⌘X⌘X

Undo:⌘Z⌘Z

Redo:⌘⇧Z⌘⇧Z

import { Component } from '@angular/core';
import { AvKbdImports } from '@avesra/angular';

@Component({
  selector: 'app-kbd-variants-demo',
  imports: [AvKbdImports],
  template: `<div class="flex flex-col gap-4">
  <div class="flex items-center gap-2">
    <span>Copy:</span>
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="command"></abbr>
      <span av-kbd-content>C</span>
    </kbd>
    <kbd av-kbd variant="light">
      <abbr av-kbd-abbr key-value="command"></abbr>
      <span av-kbd-content>C</span>
    </kbd>
  </div>
  <div class="flex items-center gap-2">
    <span>Paste:</span>
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="command"></abbr>
      <span av-kbd-content>V</span>
    </kbd>
    <kbd av-kbd variant="light">
      <abbr av-kbd-abbr key-value="command"></abbr>
      <span av-kbd-content>V</span>
    </kbd>
  </div>
  <div class="flex items-center gap-2">
    <span>Cut:</span>
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="command"></abbr>
      <span av-kbd-content>X</span>
    </kbd>
    <kbd av-kbd variant="light">
      <abbr av-kbd-abbr key-value="command"></abbr>
      <span av-kbd-content>X</span>
    </kbd>
  </div>
  <div class="flex items-center gap-2">
    <span>Undo:</span>
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="command"></abbr>
      <span av-kbd-content>Z</span>
    </kbd>
    <kbd av-kbd variant="light">
      <abbr av-kbd-abbr key-value="command"></abbr>
      <span av-kbd-content>Z</span>
    </kbd>
  </div>
  <div class="flex items-center gap-2">
    <span>Redo:</span>
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="command"></abbr>
      <abbr av-kbd-abbr key-value="shift"></abbr>
      <span av-kbd-content>Z</span>
    </kbd>
    <kbd av-kbd variant="light">
      <abbr av-kbd-abbr key-value="command"></abbr>
      <abbr av-kbd-abbr key-value="shift"></abbr>
      <span av-kbd-content>Z</span>
    </kbd>
  </div>
</div>`,
})
export class KbdVariantsDemo {}

Navigation Keys

Arrow Keys:

↑↓←→

Page Navigation:

⇞⇟↖↘

import { Component } from '@angular/core';
import { AvKbdImports } from '@avesra/angular';

@Component({
  selector: 'app-kbd-navigation-keys-demo',
  imports: [AvKbdImports],
  template: `<div class="flex flex-col gap-4">
  <div class="flex items-center gap-2">
    <span class="text-sm text-muted">Arrow Keys:</span>
    <div class="flex items-center gap-2">
      <kbd av-kbd>
        <abbr av-kbd-abbr key-value="up"></abbr>
      </kbd>
      <kbd av-kbd>
        <abbr av-kbd-abbr key-value="down"></abbr>
      </kbd>
      <kbd av-kbd>
        <abbr av-kbd-abbr key-value="left"></abbr>
      </kbd>
      <kbd av-kbd>
        <abbr av-kbd-abbr key-value="right"></abbr>
      </kbd>
    </div>
  </div>
  <div class="flex items-center gap-2">
    <span class="text-sm text-muted">Page Navigation:</span>
    <div class="flex items-center gap-2">
      <kbd av-kbd>
        <abbr av-kbd-abbr key-value="pageup"></abbr>
      </kbd>
      <kbd av-kbd>
        <abbr av-kbd-abbr key-value="pagedown"></abbr>
      </kbd>
      <kbd av-kbd>
        <abbr av-kbd-abbr key-value="home"></abbr>
      </kbd>
      <kbd av-kbd>
        <abbr av-kbd-abbr key-value="end"></abbr>
      </kbd>
    </div>
  </div>
</div>`,
})
export class KbdNavigationKeysDemo {}

Inline Usage

Press Esc to close the dialog.

Use ⌘K to open the command palette.

Navigate with ↑ and ↓ arrow keys.

Save your work with ⌘S regularly.

import { Component } from '@angular/core';
import { AvKbdImports } from '@avesra/angular';

@Component({
  selector: 'app-kbd-inline-usage-demo',
  imports: [AvKbdImports],
  template: `<div class="space-y-4">
  <p class="text-sm">
    Press
    <kbd av-kbd>
      <span av-kbd-content>Esc</span>
    </kbd>
    to close the dialog.
  </p>
  <p class="text-sm">
    Use
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="command"></abbr>
      <span av-kbd-content>K</span>
    </kbd>
    to open the command palette.
  </p>
  <p class="text-sm">
    Navigate with
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="up"></abbr>
    </kbd>
    and
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="down"></abbr>
    </kbd>
    arrow keys.
  </p>
  <p class="text-sm">
    Save your work with
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="command"></abbr>
      <span av-kbd-content>S</span>
    </kbd>
    regularly.
  </p>
</div>`,
})
export class KbdInlineUsageDemo {}

Instructional Text

Quick Actions

• Open search: ⌘K
• Toggle sidebar: ⌘B
• New file: ⌘N
• Quick save: ⌘S

import { Component } from '@angular/core';
import { AvKbdImports } from '@avesra/angular';

@Component({
  selector: 'app-kbd-instructional-text-demo',
  imports: [AvKbdImports],
  template: `<div class="space-y-3">
  <div class="rounded-lg bg-surface p-4">
    <h4 class="mb-2 text-sm font-semibold">Quick Actions</h4>
    <ul class="space-y-2 text-sm">
      <li>
        • Open search:
        <kbd av-kbd>
          <abbr av-kbd-abbr key-value="command"></abbr>
          <span av-kbd-content>K</span>
        </kbd>
      </li>
      <li>
        • Toggle sidebar:
        <kbd av-kbd>
          <abbr av-kbd-abbr key-value="command"></abbr>
          <span av-kbd-content>B</span>
        </kbd>
      </li>
      <li>
        • New file:
        <kbd av-kbd>
          <abbr av-kbd-abbr key-value="command"></abbr>
          <span av-kbd-content>N</span>
        </kbd>
      </li>
      <li>
        • Quick save:
        <kbd av-kbd>
          <abbr av-kbd-abbr key-value="command"></abbr>
          <span av-kbd-content>S</span>
        </kbd>
      </li>
    </ul>
  </div>
</div>`,
})
export class KbdInstructionalTextDemo {}

Special Keys

Press ↵ to confirm or ⎋ to cancel.

Use ⇥ to navigate between form fields and ⇧⇥ to go back.

Hold ␣ to temporarily enable panning mode.

import { Component } from '@angular/core';
import { AvKbdImports } from '@avesra/angular';

@Component({
  selector: 'app-kbd-special-keys-demo',
  imports: [AvKbdImports],
  template: `<div class="space-y-3">
  <p class="text-sm">
    Press
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="enter"></abbr>
    </kbd>
    to confirm or
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="escape"></abbr>
    </kbd>
    to cancel.
  </p>
  <p class="text-sm">
    Use
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="tab"></abbr>
    </kbd>
    to navigate between form fields and
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="shift"></abbr>
      <abbr av-kbd-abbr key-value="tab"></abbr>
    </kbd>
    to go back.
  </p>
  <p class="text-sm">
    Hold
    <kbd av-kbd>
      <abbr av-kbd-abbr key-value="space"></abbr>
    </kbd>
    to temporarily enable panning mode.
  </p>
</div>`,
})
export class KbdSpecialKeysDemo {}

Styling

Passing Tailwind CSS classes

Pass utility classes on the av-kbd host (and optionally on abbr/content hosts).

K

import { Component } from '@angular/core';
import { AvKbdImports } from '@avesra/angular';

@Component({
  selector: 'app-kbd-custom-styling-demo',
  imports: [AvKbdImports],
  template: `<kbd av-kbd class="bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100">
  <span av-kbd-content>K</span>
</kbd>`,
})
export class KbdCustomStylingDemo {}

Customizing the component classes

To customize the Kbd classes, use the @layer components directive. Learn more.

@layer components {
  .av-kbd {
    @apply bg-gray-100 dark:bg-gray-800 border-gray-300;
  }

  .av-kbd__abbr {
    @apply font-bold;
  }

  .av-kbd__content {
    @apply text-sm;
  }
}

Avesra follows the BEM methodology so component variants and states stay reusable and easy to customize.

CSS Classes

The Kbd component uses these CSS classes:

Base Classes

.av-kbd — Base keyboard key styles with background, border, and spacing
.av-kbd__abbr — Abbreviation element for modifier keys
.av-kbd__content — Content wrapper for key text

Variant Classes

.av-kbd--light — Transparent background (light variant)

API

Props for kbd[av-kbd] and abbr[av-kbd-abbr]. span[av-kbd-content] projects children and has no inputs. The title on abbr is set automatically from key-value.

Prop	Type	Default	Description
`variant`	`'default' \| 'light'`	`'default'`	Visual variant of the keyboard key (`av-kbd`).
`key-value`	`AvKbdKey`	—	Required. Keyboard key to display on `abbr[av-kbd-abbr]` (sets symbol and `title`).

Key Values

Available values for the key-value input on av-kbd-abbr (AvKbdKey):

Modifier Keys:command, shift, ctrl, option, alt, win
Special Keys:enter, delete, escape, tab, space, capslock, help
Navigation Keys:up, down, left, right, pageup, pagedown, home, end
Function Keys:fn