Componente

Button group

Une botões num único controle segmentado, compartilhando bordas e cantos. Corre na horizontal ou vertical, propaga um tamanho aos botões e pode conter rótulos de texto e separadores.

Básico

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

import { HbButtonComponent, HbButtonGroupImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-button-group-basic',
  imports: [HbButtonGroupImports, HbButtonComponent],
  template: `
    <hb-button-group>
      <button hb-button hbType="outline">Day</button>
      <button hb-button hbType="outline">Week</button>
      <button hb-button hbType="outline">Month</button>
    </hb-button-group>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoButtonGroupBasicComponent {}

Vertical

Texto e separador

Sort

Tamanhos

Referência de API

hb-button-group

Propriedade	Descrição	Tipo	Padrão
[hbOrientation]	Une os botões em linha ou em coluna.	'horizontal' \| 'vertical'	'horizontal'
[hbSize]	Tamanho propagado a todos os botões do grupo.	'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'icon' \| null	null
[class]	Classes CSS extras mescladas no grupo.	string	''

hb-button-group-text / hb-button-group-separator

Propriedade	Descrição	Tipo	Padrão
hb-button-group-text	Um segmento de rótulo não interativo (como um addon de input).	slot	—
hb-button-group-separator	Uma linha divisória entre segmentos; a orientação segue o grupo.	element	—