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.

Examples

Button Sizes

You can add size support to your reusable button component. This is implemented at the component level rather than in the primitive to provide more flexibility for different design systems.

Button Variants

You can add variant support to your reusable button component to indicate different purposes or importance levels.

Button with Icons

You can add icons to your buttons using any Angular icon library or simple SVG elements, but we recommend the @ng-icons library. This example shows how to create buttons with icons on the leading, trailing, or both sides using content projection slots.

Loading States

Use disabled="soft" for buttons that enter a loading state after being clicked.

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.

Disabled States

The disabled input accepts:

• false — enabled.
• true — native disabled applied; focus and events blocked by the browser.
• 'soft' — aria-disabled="true" and data-disabled="soft"; stays focusable. Events still fire — guard your handlers (see the Loading States example). Follows the WAI-ARIA pattern for focusable disabled controls.

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.