Component

Button group

Joins buttons into a single segmented control, sharing borders and radii. It runs horizontal or vertical, cascades a size to its buttons, and can hold text labels and separators.

Basic

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

Text & separator

Sort

Sizes

API reference

hb-button-group

Property	Description	Type	Default
[hbOrientation]	Join the buttons in a row or a column.	'horizontal' \| 'vertical'	'horizontal'
[hbSize]	Size cascaded to every button in the group.	'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl' \| 'icon' \| null	null
[class]	Extra CSS classes merged onto the group.	string	''

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

Property	Description	Type	Default
hb-button-group-text	A non-interactive label segment (like an input addon).	slot	—
hb-button-group-separator	A divider line between segments; orientation follows the group.	element	—