Base Button

The Base Button is the foundation every ng-kit button is built on. It encapsulates the shared button logic, accessibility and styling — label, icon, disabled and loading state, ARIA attributes and keyboard interactions — that all other buttons inherit. It is not meant to be used on its own; use one of the specific buttons below, or extend it to build your own.

Overview

Examples

Usage

Use the button through its directive selector on any element, or through its component selector. The directive form is preferred for new code; the component form remains supported.

html

<!-- The base supplies icon / label / loading to every button. Shown here
     via <primary-button>, which extends BaseButtonDirective. -->
<primary-button [loading]="loading()" [showIcon]="true" icon="save" label="Save"></primary-button>
<button ariaLabel="Submit" [loading]="loading()" primaryButton mat-raised-button>Submit</button>

API

The shared base every ng-kit button extends. It defines the common inputs and outputs that all other buttons inherit; consume it through one of the specific buttons rather than directly.

Inputs

Name	Type	Default	Description
`loading`	`boolean`	`false`	Shows a spinner and the loading label, and disables the button.
`disabled`	`boolean`	`false`	Disables the button.
`type`	`'button' \| 'submit'`	`'button'`	Native button type attribute.
`loadingLabel`	`string`	`'Saving...'`	Text shown while loading is true.
`label`	`string`	`'Save'`	Button label text.
`icon`	`string`	`'save'`	Material icon name rendered before the label.
`showIcon`	`boolean`	`true`	Whether the leading icon is rendered.
`style`	`object \| null`	`—`	Inline style object applied to the button.
`classes`	`string`	`'btn'`	CSS classes applied to the button.
`dataCy`	`string`	`'save-button'`	data-cy attribute for e2e selectors.

Outputs

Name	Payload	Description
`onClick`	`MouseEvent`	Emitted when the button is clicked.
`onFocus`	`FocusEvent`	Emitted when the button gains focus.
`onBlur`	`FocusEvent`	Emitted when the button loses focus.
`onKeyDown`	`KeyboardEvent`	Emitted on key down while focused.
`onKeyUp`	`KeyboardEvent`	Emitted on key up while focused.

See the Buttons introduction for the shared inputs, outputs and base-button API.