Button

The <smart-button> component provides a flexible button wrapper with an InjectionToken-based extension mechanism. It renders a default ButtonStandardComponent which can be replaced via BUTTON_STANDARD_COMPONENT_TOKEN.

Usage

<smart-button [options]="options" [disabled]="disabled">
  Save changes
</smart-button>

Components

ButtonComponent (<smart-button>)

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

ButtonStandardComponent (<smart-button-standard>)

Default concrete implementation. Simple Tailwind-styled button with size-dependent rounding and padding.

ButtonPresetComponent (<smart-button-preset>)

Fully-styled, drop-in preset implementation extending ButtonBaseComponent. Register it through BUTTON_STANDARD_COMPONENT_TOKEN to restyle every <smart-button>, or use the <smart-button-preset> selector directly.

Groups the Preline button types into one component, selected via the existing options.variant: primary → solid, secondary → outline, soft → soft. Works across the full SmartColor palette and every SmartSize, and honours options.rounded (pill), options.circular (square padding + pill), options.loading, options.confirm, and the disabled input. All classes are smart:-prefixed vanilla Tailwind with explicit dark: variants.

Because ButtonComponent renders the injected component via NgComponentOutlet, inputs are passed by canonical name — ButtonPresetComponent therefore overrides cssClass as a plain input<string>('') (dropping the inherited class alias). Note that NgComponentOutlet does not project <ng-content>, so a button label set via content only shows when the preset is used directly through <smart-button-preset> (not through the token path).

ButtonBaseComponent (abstract)

Abstract base directive for extending custom button implementations.

API

Inputs

BUTTON_STANDARD_COMPONENT_TOKEN

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

Extending the base class

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

import {
  ButtonBaseComponent,
  BUTTON_STANDARD_COMPONENT_TOKEN,
  IButtonOptions,
} from '@smartsoft001/angular';

@Component({
  selector: 'docs-custom-button',
  template: `
    <button
      type="button"
      [class]="buttonClasses()"
      [disabled]="disabled()"
      (click)="invoke()"
    >
      <ng-content />
    </button>
  `,
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomButtonComponent extends ButtonBaseComponent {
  // NgComponentOutlet passes 'cssClass' by canonical name, not the 'class' alias.
  override cssClass = input<string>('');

  buttonClasses = computed(() =>
    ['docs-button', ...this.variantClasses(), this.cssClass()]
      .filter(Boolean)
      .join(' '),
  );
}

@Component({
  selector: 'docs-button-custom-example',
  imports: [CustomButtonComponent],
  // Registering the token makes the custom button the replacement for every
  // <smart-button>. It is rendered here through its own selector because
  // content projection does not cross the NgComponentOutlet the wrapper uses
  // for injected components, so the projected label stays visible.
  providers: [
    {
      provide: BUTTON_STANDARD_COMPONENT_TOKEN,
      useValue: CustomButtonComponent,
    },
  ],
  template: `<docs-custom-button [options]="options">Save</docs-custom-button>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ButtonCustomExampleComponent {
  saved = signal(false);

  options: IButtonOptions = {
    click: () => this.saved.set(true),
    variant: 'primary',
    color: 'indigo',
    size: 'md',
  };
}

Source

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