Buttons

Custom button components built on top of Angular Material buttons. ng-kit adds ready-made button types — primary, success, edit, delete, export and more — each with additional styling, icons and loading state on top of the shared BaseButtonDirective. Pick a button from the navigation to see its live demo and source.

A BaseButtonDirective provides common functionality and styling for all button types; every ng-kit button extends this base. Buttons can be consumed in two ways:

Directives (preferred) — apply button styling and behaviour to any existing HTML element for cleaner markup and more flexibility.
Components (legacy) — dedicated Angular components that wrap Angular Material buttons. Still supported, but the directive approach is preferred for new implementations.

The two styles are interchangeable:

html

<!-- Directive (preferred) -->
<button ariaLabel="Submit" (click)="onSubmit()" primaryButton mat-raised-button>Submit</button>

<!-- Component -->
<primary-button ariaLabel="Submit" (click)="onSubmit()">Submit</primary-button>

API

All buttons share the inputs and outputs of the base button. Directive selectors are attribute-based (e.g. primaryButton); component selectors are elements (e.g. <primary-button>).

Common inputs

Name	Type	Default	Description
`label`	`string`	`'Save'`	Text shown on the button (per-button defaults vary)
`icon`	`string`	per button	Material icon name rendered before the label
`showIcon`	`boolean`	`true`	Whether the leading icon is rendered
`disabled`	`boolean`	`false`	Disables the button
`loading`	`boolean`	`false`	Shows a spinner and the loading label; disables the button
`loadingLabel`	`string`	`'Saving...'`	Text shown while `loading` is true
`type`	`'button' \| 'submit'`	`'button'`	Native button type

The base directive exposes icon, label, loading and loadingLabel. Component buttons additionally provide style, classes and dataCy inputs.

Outputs

Name	Payload	Description
`onClick`	`MouseEvent`	Button was clicked
`onFocus` / `onBlur`	`FocusEvent`	Button gained / lost focus
`onKeyDown` / `onKeyUp`	`KeyboardEvent`	Key pressed / released while focused