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>

Schematics

Generate a button component with the NgpButton primitive preconfigured.

 ng g ng-primitives:button

Options

• name: The name of the component.
• prefix: The prefix to apply to the generated component selector.
• directory: The directory at which to create the component file.
• style: The file extension or preprocessor to use for style files.
• inlineStyle: Include styles inline in the component.ts file. Only CSS styles can be included inline.
• inlineTemplate: Include template inline in the component.ts file

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

Attribute	Description	Value
data-hover	The hover state of the button.	true | false
data-focus-visible	The focus state of the button.	true | false
data-press	The pressed state of the button.	true | false
data-disabled	The disabled state of the button.	true | false