Buttons
Custom button directives 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. Apply a button directive to any existing HTML element for cleaner markup and more flexibility:
<button ariaLabel="Submit" (click)="onSubmit()" primaryButton mat-raised-button>Submit</button>API
All buttons share the inputs and outputs of the base button. Directive selectors are attribute-based (e.g. primaryButton).
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.
Outputs
| Name | Payload | Description |
|---|---|---|
onClick | MouseEvent | Button was clicked |
onFocus / onBlur | FocusEvent | Button gained / lost focus |
onKeyDown / onKeyUp | KeyboardEvent | Key pressed / released while focused |