Kbd

Shows a keyboard key or shortcut.

import { … } from '@inlaylab/ivorie/kbd'

⌘⇧⌥⌃Ctrl+B

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_KBD_IMPORTS } from '@inlaylab/ivorie/kbd';

@Component({
  selector: 'demo-kbd',
  imports: [IV_KBD_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex flex-col items-center gap-4">
      <kbd ivKbdGroup><kbd ivKbd>⌘</kbd><kbd ivKbd>⇧</kbd><kbd ivKbd>⌥</kbd><kbd ivKbd>⌃</kbd></kbd>
      <kbd ivKbdGroup><kbd ivKbd>Ctrl</kbd><span>+</span><kbd ivKbd>B</kbd></kbd>
    </div>
  `,
})
export default class KbdDemo {}

Installation

CLI

npm

npx ivorie add kbd

import { … } from '@inlaylab/ivorie/kbd'

Usage

import { IV_KBD_IMPORTS } from '@inlaylab/ivorie/kbd';

<kbd ivKbdGroup><kbd ivKbd>Ctrl</kbd><kbd ivKbd>K</kbd></kbd>

Examples

In a button

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvButton } from '@inlaylab/ivorie/button';
import { IV_KBD_IMPORTS } from '@inlaylab/ivorie/kbd';

@Component({
  selector: 'demo-kbd-button',
  imports: [IV_KBD_IMPORTS, IvButton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button ivButton type="button" variant="outline" size="sm">
      Accept <kbd ivKbd>⏎</kbd>
    </button>
  `,
})
export default class KbdButtonDemo {}

API

Every part also accepts class.

kbd[ivKbd]

One key. No inputs.

kbd[ivKbdGroup]

Groups keys with a small gap. No inputs.

Accessibility

Uses the native kbd element. Screen readers read the text, so write Ctrl, not only a symbol, where it matters.