ng-simple-button

ng-simple-button is a standalone, reusable and customizable component for Angular 18, 19 and 20.

It is designed to work with signals and Angular zoneless, providing a lightweight, flexible, and accessible simple button. It is also fully compatible with SSR, CSR and prerender.

If you want to install the latest version (currently 20):

    npm install ng-simple-button
  

Angular 19:

    npm install ng-simple-button@v19-lts
  

Angular 18:

    npm install ng-simple-button@v18-lts
  

Using ng-simple-button is easy:

• Define the component’s functionality through the (onClick) output.
• Configure its type, shape, hover behavior, and accessibility using inputs..
• Style it with customizable CSS variables to match your design needs.

Here’s a basic usage example:

    import { Component, signal } from '@angular/core';
import { NgSimpleButton } from 'ng-simple-button';

@Component({
  selector: 'app',
  standalone: true,
  imports: [NgSimpleButton],
  template: `
    <ng-simple-button
      (onClick)="clickFunction()"
      type="solid"
      [square]="true"
      hover="shadow"
      ariaLabel="Custom aria label"
    >
      Simple button inner content
    </ng-simple-button>

    <p>Clicked {{ count() }} times</p>
  `,
})
export class App {
  count = signal<number>(1);

  clickFunction() {
    const current = this.count();
    this.count.set(current + 1);
  }
};
  

As you can see in the example bellow, you can use the (onClick) output to assign the action you want the button to execute.

You can also access the native MouseEvent if you need to handle event data:

    <ng-simple-button (onClick)="handleClick($event)">
  Click me
</ng-simple-button>
  

    handleClick(event: MouseEvent) {
  console.log(event.clientX, event.clientY);
}
  

Here is a list of all input/ouput:

Action Output

Style & Behavior Inputs

Accessibility Inputs

You can easily customize the component’s appearance using the CSS variables listed below.

    ng-simple-button {
  --simple-button-bg: orange;
  --simple-button-hover-bg: red;
}
  

Layout & Spacing

Style & Visuals

Hover Effects

Styling considerations:

You can apply styles to a specific button type as follows:

    ng-simple-button[type="solid"] {
  --simple-button-bg: orange;
}
  

If you have multiple buttons and need different custom styles, you can also add a class to target them more precisely:

    ng-simple-button.myClass {
  --simple-button-outline: 2px solid orange;
}
  

You can configure the accessibility of the component using the accessibility inputs explained in the inputs/outputs section: Accessibility Inputs