Introduction

Custom button components build on top of Angular Material buttons. Provides the ability to create different types of buttons with additional styling and features.

Base Button

A base button component that provides common functionality and styling for all button types. All buttons extends this base button

Usage

Button components in ng-kit can be used in two ways: as directives (recommended) or as components (legacy). The directive approach provides more flexibility and cleaner markup by applying button behavior directly to existing HTML elements.

Directives allow you to apply button styling and behavior to any HTML element. This approach is more flexible and results in cleaner markup.

<!-- Primary Button -->
<button ariaLabel="Submit" (click)="onSubmit()" primaryButton>Submit</button>

<!-- Delete Button -->
<button ariaLabel="Delete item" (click)="onDelete()" deleteButton>Delete</button>

<!-- Edit Button -->
<button ariaLabel="Edit item" (click)="onEdit()" editButton>Edit</button>

The component approach uses dedicated Angular components that wrap Angular Material buttons. While still supported, the directive approach is preferred for new implementations.

Available Buttons

Here are the available buttons in the library.

• Base Button
• Bootstrap Link Button
• Close Button
• Delete Button
• Edit Bootstrap Button
• Edit Button
• Edit SVG Icon Button
• Excel Export Button
• Manage Button
• PDF Export Button
• Primary Button
• Save Primary Button
• Search Button
• Success Button
• View Button
• View Primary Button