Kbd for Angular

import { AuiKbd } from '@absoluteui/angular/kbd';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Kbd page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { kbd: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiKbd } from '@absoluteui/angular/kbd';

@Component({
  selector: 'app-save-hint',
  imports: [AuiKbd],
  template: `<p>Save with <aui-kbd hotkey="Mod+S"></aui-kbd></p>`,
})
export class SaveHintComponent {}

<aui-kbd>

Class AuiKbd; template reference #ref="auiKbd".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
hotkey	string		Required. Shortcut in matchesHotkey syntax, such as ‘Mod+Shift+K’; ‘Plus’ is the + key.
platform	KbdPlatform	'auto'	Apple shows Command for Mod and modifier symbols; other shows Ctrl and ‘+’ separators; auto detects.
size	KbdSize	'md'	Keycap size.
locale	string	'en-US'	Locale of key names.