Kbd

A keycap for a keyboard shortcut. Use KbdGroup for a combination — the grouping is semantic, not decorative.

Added 14 October 2026

React

Codecomponents/react/kbd-demo.tsx

import {Kbd, KbdGroup} from '@stroeer-labs/design-library/react';

export function KbdDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Single keys</p>
                <div className="flex flex-wrap items-center gap-3">
                    <Kbd>⌘</Kbd>
                    <Kbd>Esc</Kbd>
                    <Kbd>Enter</Kbd>
                    <Kbd>⇧</Kbd>
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Combination</p>
                <div className="flex flex-wrap items-center gap-3">
                    <KbdGroup>
                        <Kbd>Ctrl</Kbd>
                        <Kbd>B</Kbd>
                    </KbdGroup>
                    <KbdGroup>
                        <Kbd>⌘</Kbd>
                        <Kbd>K</Kbd>
                    </KbdGroup>
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">In a sentence</p>
                <p className="text-sm">
                    Press{' '}
                    <KbdGroup>
                        <Kbd>⌘</Kbd>
                        <Kbd>K</Kbd>
                    </KbdGroup>{' '}
                    to search, or <Kbd>Esc</Kbd> to close.
                </p>
            </div>
        </div>
    );
}

Angular

Codecomponents/angular/kbd-demo.ts

import {Component} from '@angular/core';
import {HlmKbdImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-kbd-demo',
    standalone: true,
    imports: [HlmKbdImports],
    template: `
        <div class="space-y-6">
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">Single keys</p>
                <div class="flex flex-wrap items-center gap-3">
                    <kbd hlmKbd>⌘</kbd>
                    <kbd hlmKbd>Esc</kbd>
                    <kbd hlmKbd>Enter</kbd>
                    <kbd hlmKbd>⇧</kbd>
                </div>
            </div>
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">Combination</p>
                <div class="flex flex-wrap items-center gap-3">
                    <kbd hlmKbdGroup>
                        <kbd hlmKbd>Ctrl</kbd>
                        <kbd hlmKbd>B</kbd>
                    </kbd>
                    <kbd hlmKbdGroup>
                        <kbd hlmKbd>⌘</kbd>
                        <kbd hlmKbd>K</kbd>
                    </kbd>
                </div>
            </div>
            <div class="space-y-2">
                <p class="text-xs font-medium text-muted-foreground">In a sentence</p>
                <p class="text-sm">
                    Press
                    <kbd hlmKbdGroup>
                        <kbd hlmKbd>⌘</kbd>
                        <kbd hlmKbd>K</kbd>
                    </kbd>
                    to search, or <kbd hlmKbd>Esc</kbd> to close.
                </p>
            </div>
        </div>
    `,
})
export class KbdDemoComponent {}