ButtonGroup

The <smart-button-group> component renders a horizontal group of related buttons that share a single-selection state. It uses the InjectionToken pattern: a default ButtonGroupStandardComponent is rendered, which can be replaced via BUTTON_GROUP_STANDARD_COMPONENT_TOKEN.

Usage

<smart-button-group
  [buttons]="buttons"
  [options]="options"
  [selected]="view()"
  (buttonClick)="onButtonClick($event)"
/>

Components

ButtonGroupComponent (<smart-button-group>)

Main wrapper component. Renders ButtonGroupStandardComponent by default. When BUTTON_GROUP_STANDARD_COMPONENT_TOKEN is provided, renders the injected component via NgComponentOutlet.

ButtonGroupStandardComponent (<smart-button-group-standard>)

Default concrete implementation. Renders a <div role="group"> containing one <button> per item, with optional label and count spans.

ButtonGroupPresetComponent (<smart-button-group-preset>)

Fully-styled, drop-in concrete implementation (Preline button-group look) that extends ButtonGroupBaseComponent. Renders a segmented control with a bg-white/dark:bg-gray-800 surface, shared borders collapsed via -ms-px, and rounded ends. The segment matching selected is emphasised (aria-pressed="true" + blue text). options.variant adjusts per-button content: icon-only hides labels (and sets aria-label), with-stat styles the count pill with the blue stat palette; all other variants render the basic label + count layout.

Register it through BUTTON_GROUP_STANDARD_COMPONENT_TOKEN to restyle every <smart-button-group>, or use the <smart-button-group-preset> selector directly.

NgComponentOutlet note: when registered through the token, the wrapper passes inputs by canonical name, so the preset overrides the inherited class alias with a plain cssClass = input<string>('') so external classes still bind.

ButtonGroupBaseComponent (abstract)

Abstract base directive (@Directive()) for extending custom button-group implementations. Exposes select(id: string) which sets selected and emits buttonClick.

API

Inputs / Models / Outputs

BUTTON_GROUP_STANDARD_COMPONENT_TOKEN

InjectionToken that allows replacing the default ButtonGroupStandardComponent with a custom implementation. Provide a Type<ButtonGroupBaseComponent> to override.

Extending the base class

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

import {
  ButtonGroupBaseComponent,
  ButtonGroupComponent,
  BUTTON_GROUP_STANDARD_COMPONENT_TOKEN,
  IButtonGroupButton,
} from '@smartsoft001/angular';

@Component({
  selector: 'docs-custom-button-group',
  template: `
    <div role="group" class="docs-button-group" [class]="cssClass()">
      @for (button of buttons(); track button.id) {
        <button
          type="button"
          class="docs-button-group__button"
          [disabled]="button.disabled ?? false"
          [attr.aria-pressed]="selected() === button.id"
          (click)="select(button.id)"
        >
          {{ button.label }}

          @if (button.count !== undefined) {
            <span class="docs-button-group__count">{{ button.count }}</span>
          }
        </button>
      }
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomButtonGroupComponent extends ButtonGroupBaseComponent {
  // NgComponentOutlet passes 'cssClass' by canonical name, not the 'class' alias.
  override cssClass = input<string>('');
}

@Component({
  selector: 'docs-button-group-custom-example',
  imports: [ButtonGroupComponent],
  providers: [
    {
      provide: BUTTON_GROUP_STANDARD_COMPONENT_TOKEN,
      useValue: CustomButtonGroupComponent,
    },
  ],
  template: ` <smart-button-group [buttons]="buttons" selected="month" /> `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ButtonGroupCustomExampleComponent {
  buttons: IButtonGroupButton[] = [
    { id: 'years', label: 'Years' },
    { id: 'month', label: 'Month' },
    { id: 'date', label: 'Date' },
  ];
}

Source

The component lives in packages/shared/angular/src/lib/components/button-group and is documented for Claude Code by the angular-components-button-group skill.