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.

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.

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.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• example-styles: 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

Accessibility

Apply the primitive to native <button> elements to inherit built-in browser accessibility. With disabled="'soft'", aria-disabled is used in place of the native disabled attribute so the element remains focusable.

Keyboard Interactions

• Enter: Activate the button.
• Space: Activate the button.