# Kbd
Use `ui-kbd` to present keyboard keys inside help copy, shortcut lists, command hints, and documentation. It is not an interactive control by itself. Its job is to make keyboard tokens readable, scannable, and visually consistent.
## Import
```ts
import { KbdComponent } from 'ui';
```
## Basic keys
```ts
import { Component } from '@angular/core';
import { KbdComponent } from 'ui';
@Component({
selector: 'app-kbd-basic-demo',
standalone: true,
imports: [KbdComponent],
template: `
`,
})
export class KbdBasicDemoComponent {}
```
## Size and appearance
```ts
import { Component } from '@angular/core';
import { KbdComponent } from 'ui';
@Component({
selector: 'app-kbd-size-appearance-demo',
standalone: true,
imports: [KbdComponent],
template: `
Default appearance
Filled appearance
`,
})
export class KbdSizeAppearanceDemoComponent {}
```
## Common shortcut rows
```ts
import { Component } from '@angular/core';
import { KbdComponent } from 'ui';
@Component({
selector: 'app-kbd-common-shortcuts-demo',
standalone: true,
imports: [KbdComponent],
template: `
@for (shortcut of shortcuts; track shortcut.label) {
`,
})
export class KbdNavigationDemoComponent {}
```
## Command help composition
```ts
import { Component } from '@angular/core';
import { KbdComponent, MessageBarComponent, TagComponent } from 'ui';
@Component({
selector: 'app-kbd-command-help-demo',
standalone: true,
imports: [KbdComponent, MessageBarComponent, TagComponent],
template: `
Editor shortcuts
The kbd component is most useful when it appears inside real shortcut help, command
hints, or training surfaces.
@for (item of shortcuts; track item.label) {
{{ item.label }}
@for (key of item.keys; track key) {
}
}
Open command palette with
`,
})
export class KbdCommandHelpDemoComponent {
protected readonly shortcuts = [
{ label: 'Save draft', keys: ['Ctrl', 'S'] },
{ label: 'Open search', keys: ['Ctrl', 'F'] },
{ label: 'Duplicate line', keys: ['Shift', 'Alt', '↓'] },
];
}
```
## Accessibility
### Semantics
`ui-kbd` renders a native `kbd` element with an `aria-label` that expands to a readable key description.
| Element | Behavior |
| --- | --- |
| root | native `kbd` semantics |
| aria label | localized `Keyboard key: {text}` pattern |
| interactive behavior | none, it is purely presentational content |
### Usage guidance
Because the component is not interactive, use it only as supporting content next to the action or instruction it describes. Shortcut hints should reflect real product behavior instead of speculative or decorative keyboard tokens.