import { Component } from '@angular/core';
import { WrKbd } from 'ngwr/keyboard';
@Component({ imports: [WrKbd] })
export class MyComponent {}Keyboard
A keycap for showing a keyboard shortcut.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic
Put a plain + between caps for a chord.
<wr-kbd>⌘</wr-kbd> + <wr-kbd>K</wr-kbd>Sizes
<wr-kbd size="sm">Esc</wr-kbd>
<wr-kbd size="md">Enter</wr-kbd>
<wr-kbd size="lg">⌫</wr-kbd>Full keyboard
Lay caps out with flex or grid, and set the width of wide keys yourself.
<wr-kbd>Esc</wr-kbd>
<wr-kbd>1</wr-kbd> <wr-kbd>2</wr-kbd> …
<wr-kbd>⌃</wr-kbd> <wr-kbd>⌥</wr-kbd> <wr-kbd>⌘</wr-kbd> <wr-kbd>Space</wr-kbd>Inside prose
A cap does not take the size of the text around it: use md in body copy and sm in small text.
<!-- wrTypography comes from ngwr/typography. -->
<p wrTypography>
Press <wr-kbd>⌘</wr-kbd> + <wr-kbd>P</wr-kbd> to open the command palette.
</p>API
| Name | Description | Type | Default |
|---|---|---|---|
size | Visual size variant. | 'sm' | 'md' | 'lg' | 'md' |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/keyboard's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-kbd-bg | var(--wr-color-surface) | .wr-kbd |
--wr-kbd-border | color-mix(in srgb, var(--wr-color-on-surface) 18%, transparent) | .wr-kbd |
--wr-kbd-border-bottom | color-mix(in srgb, var(--wr-color-on-surface) 32%, transparent) | .wr-kbd |
--wr-kbd-color | var(--wr-color-on-surface) | .wr-kbd |
--wr-kbd-depth | 1px | .wr-kbd +1 variant override |
--wr-kbd-font-family | var(--wr-font-family-base, system-ui, sans-serif) | .wr-kbd |
--wr-kbd-font-size | var(--wr-text-sm) | .wr-kbd +2 variant overrides |
--wr-kbd-font-weight | var(--wr-font-weight-semibold) | .wr-kbd |
--wr-kbd-line-height | var(--wr-leading-none) | .wr-kbd |
--wr-kbd-padding-x | var(--wr-space-sm) | .wr-kbd +2 variant overrides |
--wr-kbd-radius | var(--wr-control-radius-md) | .wr-kbd +2 variant overrides |
--wr-kbd-shadow | 0 var(--wr-kbd-depth) 0 color-mix(in srgb, var(--wr-color-backdrop) 25%, transparent) | .wr-kbd |