ng-link-button

ng-link-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 link button. It is also fully compatible with SSR, CSR and prerender.

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

    npm install ng-link-button
  

Angular 19:

    npm install ng-link-button@v19-lts
  

Angular 18:

    npm install ng-link-button@v18-lts
  

Using ng-link-button is easy:

• You can define the navigation path in two ways: using href or routerLink (see next section)
• 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 { NgLinkButton } from 'ng-link-button';

@Component({
  selector: 'app',
  standalone: true,
  imports: [ NgLinkButton ],
  template: `
    <ng-link-button
      routerLink="home"
      type="solid"
      [square]="true"
      hover="shadow"
      ariaLabel="Custom aria label"
    >
      Link button inner content
    </ng-link-button>
  `,
})
export class App {

}
  

As it was mencioned below, you can set navigation route in two ways: href (ideally for external links) or routerLink (for page routes).

Router Link Mode

Here’s an example showing all available properties in routerLink mode.

Keep in mind that the only required input is routerLink. You don’t need to use all the other inputs at once — this is just a complete example for reference.

    import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NgLinkButton } from 'ng-link-button';

@Component({
  selector: 'app',
  standalone: true,
  imports: [NgLinkButton],
  template: `
    <ng-link-button
      routerLink="home"
      [activatedRoute]="false"
      [queryParams]="{ category: 'books', sort: 'price' }"
      fragment="fragmentExample"
      [relativeTo]="activatedRoute"
      queryParamsHandling="merge"
      [state]="{ state: 'state example' }"
    >
      Link button inner content
    </ng-link-button>
  `,
})
export class App {
  activatedRoute = inject(ActivatedRoute);
}
  

Href Link Mode

Here’s an example showing all available properties in href mode.

Keep in mind that the only required input is href. You don’t need to use all the other inputs at once — this is just a complete example for reference.

    <ng-link-button
  href="https://universalux.dev"
  target="_blank"
  rel="noreferrer noopener"
>
  Link button inner content
</ng-link-button>
  

Here is a list of all input/ouput:

Router Link Inputs

Href Inputs

Style & Behavior Inputs

Accessibility Inputs

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

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

Layout & Spacing

Style & Visuals

Hover & Active Effects

Styling considerations:

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

    ng-link-button[type="solid"] {
  --link-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-link-button.myClass {
  --link-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