Button

A button is a clickable element that can be used to trigger an action. This primitive enhances the native button element with improved accessibility and interaction handling for hover, press and focus.

<button ngpButton>Button</button>

Import

Import the Button primitives from ng-primitives/button.

import { NgpButton } from 'ng-primitives/button';

Usage

Assemble the button directives in your template.

<button ngpButton>Button</button>

Reusable Component

Create a button component that uses the NgpButton directive.

import { Component } from '@angular/core';
import { Button } from './button';

@Component({
  selector: 'app-root',
  imports: [Button],
  template: '<button app-button>Click me</button>',
})
export default class App {}

Schematics

Generate a reusable button component using the Angular CLI.

ng g ng-primitives:primitive button

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

The following directives are available to import from the ng-primitives/button package:

NgpButton

A directive that can be used to create a button.

• Selector: [ngpButton]
• Exported As: ngpButton
• Host Directives: NgpHover, NgpFocusVisible, NgpPress

Data Attributes