Overview

The Angular Button is a custom HTML5 button component. It has several built-in features such as support for icons, predefined styles, different button types, different button sizes, and UI customization. Toggle and repeat button functionality can be achieved by handling a click event.

Icon button

Users tend to perceive visual information more readily than text. To this end, an icon button has been designed to include an icon to the right or left of the button text or provide an icon-only button.

• Icon button documentation

Predefined styles

Several predefined styles of button are available:

• Primary
• Success
• Info
• Warning
• Danger
• Link

You can use them based on the context of your application.

• Button style documentation

UI customization

You can choose from built-in button types such as outline, block, and round buttons. Also, you can customize the button’s appearance.

Built-in themes

The Angular Button component supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application.

• Theme Studio Application

Angular version compatibility

With continuous improvement in Angular versions, the Angular Button is kept up to date to make it compatible with the latest version.

Web accessibility

• Fully supports WAI-ARIA accessibility practices to work with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Based on WCAG 2.0 standards, we designed the UI element visuals such as foreground color, background color, line spacing, text, and images.
• Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

Angular Button Code Example

Easily get started with the Angular Button using a few simple lines of HTML and TS code example as demonstrated below. Also explore our Angular Button Example that shows you how to render and configure a Button in Angular.

<div class="control-section">
    <button ejs-button>Normal</button>
</div>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<!-- To render Button. -->
    <button ejs-button>Normal</button>`
})
export class AppComponent { }