modus-angular-button-group-usage

Modus Button Group Usage in Angular

Critical patterns for using ModusButton components inside ModusButtonGroup.

The Problem

When ModusButton has default values for variant and color, these explicit values override the ModusButtonGroup's settings. This causes all buttons to look the same regardless of the group's variant prop.

Root Cause

The modus-wc-button-group web component uses setAttribute() to apply its variant and color to child buttons after they load. If Angular buttons have explicit defaults, they override the group's settings.

Correct Pattern

ModusButton Wrapper Component

Do NOT set defaults for variant or color in the ModusButton wrapper:

// CORRECT - No defaults, allows inheritance from button group
@Component({
  selector: 'modus-button',
  template: `
    <modus-wc-button
      [color]="color() || null"
      [variant]="variant() || null"
      [size]="size()"
      [disabled]="disabled()"
      (buttonClick)="handleButtonClick($event)"
    >
      <ng-content />
    </modus-wc-button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ModusButtonComponent {
  // No defaults for color and variant - allows group to control
  readonly color = input<ButtonColor | undefined>();
  readonly variant = input<ButtonVariant | undefined>();
  readonly size = input<ButtonSize>('md');
  readonly disabled = input<boolean>(false);

  readonly buttonClick = output<MouseEvent | KeyboardEvent>();

  handleButtonClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
    if (!this.disabled()) {
      this.buttonClick.emit(event.detail);
    }
  }
}

// WRONG - Defaults override button group settings
@Component({
  selector: 'modus-button',
  // ...
})
export class ModusButtonComponent {
  readonly color = input<ButtonColor>('primary'); // BAD: Will override group's color
  readonly variant = input<ButtonVariant>('filled'); // BAD: Will override group's variant
  // ...
}