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.

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.

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

Data Attributes