Componente

Kbd

Uma pequena tecla para atalhos de teclado. Dimensione-a para combinar com o texto próximo, agrupe várias teclas num combo, insira ícones, e use-a inline em texto ou dentro de botões.

Tamanhos

Esc

Tab

Enter

Space

Shift

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbKbdImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-kbd-sizes',
  imports: [HbKbdImports],
  template: `
    <div class="flex flex-wrap items-center gap-3">
      <hb-kbd hbSize="xs">Esc</hb-kbd>
      <hb-kbd hbSize="sm">Tab</hb-kbd>
      <hb-kbd hbSize="md">Enter</hb-kbd>
      <hb-kbd hbSize="lg">Space</hb-kbd>
      <hb-kbd hbSize="xl">Shift</hb-kbd>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoKbdSizesComponent {}

Grupos e ícones

⌘

Ctrl

Alt

Del

⌘

Inline e em botões

Press ⌘K to open the command palette, or / to focus search.

Referência de API

hb-kbd / [hb-kbd]

Propriedade	Descrição	Tipo	Padrão
selector	Use como hb-kbd, ou como atributo num elemento <kbd> nativo para texto inline.	hb-kbd \| [hb-kbd]	—
[hbSize]	Altura da tecla e escala do texto.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[class]	Classes extras mescladas sobre o estilo da tecla.	ClassValue	''

hb-kbd-group / [hb-kbd-group]

Propriedade	Descrição	Tipo	Padrão
hb-kbd-group	Dispõe várias teclas em linha com um pequeno espaço — para combos como ⌘ K.	component	—