Syncfusion Angular Buttons

Implementing Syncfusion Angular Buttons

Button

The Syncfusion Angular Button is a graphical user interface element rendered via the ejs-button directive. It triggers an action on click and supports text, icons, or both — with extensive styling, accessibility, and behavioral options.

Navigation Guide

Getting Started

📄 Read: references/button-getting-started.md

• Prerequisites and package dependencies
• Setting up a new Angular application (standalone architecture)
• Installing @syncfusion/ej2-angular-buttons via ng add
• CSS/theme imports for Material and other themes
• Rendering the first ejs-button directive
• Changing button type using cssClass

Types and Styles

📄 Read: references/button-types-and-styles.md

• Predefined color styles (e-primary, e-success, e-info, e-warning, e-danger, e-link)
• Basic HTML types: submit and reset buttons
• Flat, outline, round, and toggle button types
• Toggle button active state via e-active class
• Icon buttons using iconCss and iconPosition
• SVG icon support
• Button sizes: small (e-small) vs normal

How-To Patterns

📄 Read: references/button-how-to.md

• Create a block (full-width) button using e-block
• Create a rounded-corner button with custom CSS
• Add a navigation link inside a button
• Customize button appearance with a custom CSS class
• Style native <input> and <a> elements as buttons
• Set disabled state with [disabled]="true"
• Enable right-to-left (RTL) support with [enableRtl]="true"
• Add a tooltip on hover using the created event
• Implement a repeat button using mouse and touch events

Accessibility

📄 Read: references/button-accessibility.md

• WCAG 2.2 and Section 508 compliance details
• WAI-ARIA attributes (aria-label for icon-only buttons)
• Keyboard interaction: Space key behavior
• Screen reader support and automated testing tools

EJ1 Migration

📄 Read: references/button-ej1-migration.md

• Property mapping from EJ1 to EJ2 (e.g., text → content, prefixIcon → iconCss)
• Method and event equivalents
• Properties not available in EJ2

API Reference

📄 Read: references/button-api.md

• All properties with types, defaults, and code samples
• Methods: click(), focusIn(), destroy()
• Events: created

---

Quick Start

ng add @syncfusion/ej2-angular-buttons

// src/app/app.ts (Angular 20+) or src/app/app.component.ts (Angular 19 and below)
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button>Default</button>
      <button ejs-button cssClass="e-primary">Primary</button>
      <button ejs-button cssClass="e-success">Success</button>
    </div>
  `
})
export class AppComponent { }

Angular 20+ note: The CLI generates src/app/app.ts, app.html, and app.css (no .component. suffix). In Angular 19 and below, the file is app.component.ts.

---

Common Patterns

Color-Styled Buttons

<button ejs-button cssClass="e-primary">Primary</button>
<button ejs-button cssClass="e-success">Success</button>
<button ejs-button cssClass="e-warning">Warning</button>
<button ejs-button cssClass="e-danger">Danger</button>

Icon Button

<button ejs-button iconCss="e-icons e-save">Save</button>
<button ejs-button iconCss="e-icons e-delete" iconPosition="Right">Delete</button>

Toggle Button

// In component class
@ViewChild('togglebtn') togglebtn: ButtonComponent | any;
@HostListener('click', ['togglebtn'])
btnClick() {
  if (this.togglebtn.element.classList.contains('e-active')) {
    this.togglebtn.content = 'Pause';
  } else {
    this.togglebtn.content = 'Play';
  }
}

<button #togglebtn ejs-button cssClass="e-flat" [isToggle]="true" content="Play"></button>

Disabled Button

<button ejs-button [disabled]="true">Disabled</button>

Block (Full-Width) Button

<button ejs-button cssClass="e-block e-primary">Full Width</button>

---

ButtonGroup

The Syncfusion Angular ButtonGroup is a CSS-only component that groups multiple buttons together into a single cohesive UI element. It supports horizontal and vertical layouts, radio/checkbox selection behaviors, outline and color styles, icon buttons, nested split/dropdown buttons, RTL, form integration, and full accessibility compliance.

Package: @syncfusion/ej2-angular-buttons Container class: .e-btn-group Button directive: ejs-button (from ButtonModule)

---

Navigation Guide

Getting Started

📄 Read: references/buttongroup-getting-started.md

• Installing @syncfusion/ej2-angular-buttons via ng add
• ButtonModule import in standalone component's imports[]
• CSS theme imports for material theme
• Basic horizontal ButtonGroup with ejs-button
• Vertical orientation using e-vertical class

Types and Styles

📄 Read: references/buttongroup-types-and-styles.md

• Outline ButtonGroup (e-outline on container + each button)
• Color styles: e-primary, e-success, e-info, e-warning, e-danger via cssClass
• Rounded corners with e-round-corner
• Icon buttons using iconCss property

Selection (Radio & Checkbox)

📄 Read: references/buttongroup-selection.md

• Single selection (radio type) with <input type="radio"> + <label class="e-btn">
• Multiple selection (checkbox type) with <input type="checkbox"> + <label class="e-btn">
• Show pre-selected state on initial render using checked attribute
• Nesting DropDownButton or SplitButton inside a group

How-To Recipes

📄 Read: references/buttongroup-how-to.md

• Disable individual button or entire group
• Enable ripple effect
• RTL (right-to-left) layout
• Form submission with radio/checkbox button groups
• Programmatic initialization using createButtonGroup utility

Accessibility

📄 Read: references/buttongroup-accessibility.md

• WCAG 2.2 / Section 508 compliance
• Keyboard navigation shortcuts (normal, checkbox, radio behaviors)
• Screen reader guidance

---

Quick Start

1. Install the package:

ng add @syncfusion/ej2-angular-buttons

2. Add CSS to `styles.css`:

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

3. Create a basic ButtonGroup:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class='e-btn-group'>
      <button ejs-button>HTML</button>
      <button ejs-button>CSS</button>
      <button ejs-button>JavaScript</button>
    </div>`
})
export class AppComponent { }

---

Common Patterns

Vertical ButtonGroup

Add e-vertical to the container — buttons stack top-to-bottom:

<div class='e-btn-group e-vertical'>
  <button ejs-button>HTML</button>
  <button ejs-button>CSS</button>
  <button ejs-button>JavaScript</button>
</div>

e-vertical does not support nesting SplitButton.

Outline Style

Add e-outline to container and cssClass='e-outline' to each button:

<div class='e-btn-group e-outline'>
  <button ejs-button cssClass='e-outline'>HTML</button>
  <button ejs-button cssClass='e-outline'>CSS</button>
  <button ejs-button cssClass='e-outline'>JavaScript</button>
</div>

Radio Selection (Single Select)

<div class='e-btn-group'>
  <input type="radio" id="radioleft" name="align" value="left"/>
  <label class="e-btn" for="radioleft">Left</label>
  <input type="radio" id="radiomiddle" name="align" value="middle"/>
  <label class="e-btn" for="radiomiddle">Center</label>
  <input type="radio" id="radioright" name="align" value="right"/>
  <label class="e-btn" for="radioright">Right</label>
</div>

Checkbox Selection (Multi Select)

<div class='e-btn-group'>
  <input type="checkbox" id="check_bold" name="font" value="bold"/>
  <label class="e-btn" for="check_bold">Bold</label>
  <input type="checkbox" id="check_italic" name="font" value="italic"/>
  <label class="e-btn" for="check_italic">Italic</label>
  <input type="checkbox" id="check_underline" name="font" value="underline"/>
  <label class="e-btn" for="check_underline">Underline</label>
</div>

---

Key Decision Guide

---

DropDownButton

The Syncfusion Angular DropDownButton is a graphical UI element rendered via the ejs-dropdownbutton directive. It displays a button that opens a popup menu of action items when clicked. It supports icons, custom templates, animations, navigation links, accessibility, RTL, and dynamic item management.

---

Navigation Guide

Getting Started

📄 Read: references/dropdownbutton-getting-started.md

• Prerequisites and package dependencies
• Setting up a new Angular application (standalone architecture)
• Installing @syncfusion/ej2-angular-splitbuttons via ng add
• CSS/theme imports for Material and other themes
• Rendering the first ejs-dropdownbutton directive
• Defining ItemModel[] action items

Icons and Appearance

📄 Read: references/dropdownbutton-icons-and-appearance.md

• Button icon with iconCss and iconPosition (Left, Top)
• Vertical button layout using e-vertical cssClass
• Icon-only button with e-caret-hide cssClass
• Sprite image as button icon
• Hiding the dropdown arrow
• Rounded corner styling
• Customizing icon size and button width
• Changing the caret/dropdown arrow icon dynamically

Popup Items and Templating

📄 Read: references/dropdownbutton-popup-items.md

• Icons on popup action items via iconCss
• Navigation links via url property on items
• Separator items using separator: true
• Item-level templating with beforeItemRender event
• Full popup templating using target property
• itemTemplate property for custom item rendering
• Grouping items with ListView as popup target
• Underlining a character in item text

Events and Interactivity

📄 Read: references/dropdownbutton-events.md

• select — handle item selection
• open / close — popup open/close callbacks
• beforeOpen / beforeClose — cancel or customize before open/close
• beforeItemRender — customize each item during render
• created — component initialized callback
• Opening a dialog on popup item click
• Changing popup open position via open event

Animation

📄 Read: references/dropdownbutton-animation.md

• animationSettings property overview
• Supported effects: None, SlideDown, ZoomIn, FadeIn
• Configuring duration and easing

Configuration and Behavior

📄 Read: references/dropdownbutton-configuration.md

• Disabling the DropDownButton via disabled
• RTL support via enableRtl
• popupWidth for consistent popup sizing
• createPopupOnClick for deferred popup creation
• enableHtmlSanitizer for safe HTML rendering
• closeActionEvents to customize popup close trigger
• enablePersistence for state persistence
• Dynamic item management: addItems, removeItems, toggle

API Reference

📄 Read: references/dropdownbutton-api.md

• All properties with types, defaults, and descriptions
• All events with argument types
• All methods with parameters and return types
• ItemModel interface fields
• Supporting interfaces: BeforeOpenCloseMenuEventArgs, MenuEventArgs, OpenCloseMenuEventArgs

Accessibility

📄 Read: references/dropdownbutton-accessibility.md

• WCAG 2.2 / Section 508 compliance
• WAI-ARIA attributes and roles
• Keyboard navigation shortcuts
• Screen reader support
• RTL support

---

Quick Start

import { Component } from '@angular/core';
import { DropDownButtonModule, ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [DropDownButtonModule],
  selector: 'app-root',
  template: `
    <button ejs-dropdownbutton [items]="items" content="Clipboard" iconCss="e-icons e-copy" (select)="onSelect($event)"></button>
  `
})
export class AppComponent {
  public items: ItemModel[] = [
    { text: 'Cut',   iconCss: 'e-icons e-cut' },
    { text: 'Copy',  iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
  ];

  onSelect(args: any) {
    console.log('Selected:', args.item.text);
  }
}

---

Common Patterns

Popup with separator groups

public items: ItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { text: 'Paste' },
  { separator: true },
  { text: 'Font' },
  { text: 'Paragraph' }
];

Icon-only button (no text, no caret)

<button ejs-dropdownbutton [items]="items" iconCss="e-icons e-menu" cssClass="e-caret-hide"></button>

Vertical layout with top icon

<button ejs-dropdownbutton [items]="items" content="Paste" iconCss="e-icons e-paste" iconPosition="Top" cssClass="e-vertical"></button>

RTL layout

<button ejs-dropdownbutton [items]="items" content="Message" enableRtl="true"></button>

Custom popup width

<button ejs-dropdownbutton [items]="items" [popupWidth]="'250px'" content="Options"></button>

Navigation items

public items: ItemModel[] = [
  { text: 'Home',   url: '/home' },
  { text: 'About',  url: '/about' }
];

---

Floating Action Button

The Syncfusion Angular Floating Action Button (ejs-fab) is a circular button that floats above the UI and represents the primary action in an application. It supports flexible positioning, icon + text content, predefined styles, events, full accessibility compliance, and CSS customization.

Package: @syncfusion/ej2-angular-buttons Module: FabModule Selector: ejs-fab

---

Navigation Guide

Getting Started

📄 Read: references/floating-action-button-getting-started.md

• Installing @syncfusion/ej2-angular-buttons via ng add
• CSS theme imports for Material theme
• FabModule import in standalone component
• Minimal ejs-fab setup
• Using target to scope FAB to a container
• Handling the (click) event

Icons and Content

📄 Read: references/floating-action-button-icons.md

• iconCss property for icon-only FAB
• content property for text label
• iconPosition for Left vs Right icon placement
• Combined icon + text FAB examples

Positions

📄 Read: references/floating-action-button-positions.md

• position property with all nine predefined values (TopLeft → BottomRight)
• target property to scope FAB to a container element
• Custom CSS position using cssClass
• Calling refreshPosition() after target resize

Styles and Appearance

📄 Read: references/floating-action-button-styles.md

• Predefined cssClass values: e-primary, e-outline, e-info, e-success, e-warning, e-danger
• CSS class override reference table (.e-fab.e-btn, hover, focus, active, icon)
• Show text on hover with CSS transition
• Outline color customization

Events

📄 Read: references/floating-action-button-events.md

• (created) event for post-render initialization
• (click) event for click handling

Accessibility

📄 Read: references/floating-action-button-accessibility.md

• WCAG 2.2 / Section 508 compliance summary
• WAI-ARIA attributes (aria-label)
• Keyboard interaction (Space key)
• RTL support via enableRtl
• Screen reader guidance

API Reference

📄 Read: references/floating-action-button-api.md

• All properties: content, cssClass, disabled, enableHtmlSanitizer, enablePersistence, enableRtl, iconCss, iconPosition, isPrimary, isToggle, position, target, visible
• Methods: click(), destroy(), focusIn(), getPersistData(), refreshPosition()
• Events: created, click

---

Quick Start

ng add @syncfusion/ej2-angular-buttons

/* styles.css – added automatically by ng add */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/material.css';

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" content="Add" target="#targetElement"></button>
  `
})
export class AppComponent { }

---

Common Patterns

Icon-Only FAB (most common)

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-edit" target="#target"></button>
  `
})
export class AppComponent { }

FAB with Click Handler

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-edit" content="Edit"
      (click)="onFabClick()" target="#target"></button>
  `
})
export class AppComponent {
  onFabClick(): void {
    alert('FAB clicked!');
  }
}

FAB with Custom Style

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-delete" cssClass="e-danger" target="#target"></button>
  `
})
export class AppComponent { }

---

Key Props at a Glance

---

Speed Dial

The Syncfusion Angular Speed Dial component renders a floating action button that expands to reveal a set of action items. It is based on the ejs-speeddial directive and supports linear and radial display modes, flexible positioning, animations, modal overlay, custom templates, and full accessibility compliance.

---

Navigation Guide

Getting Started

📄 Read: references/speeddial-getting-started.md

• Prerequisites and package dependencies
• Installing @syncfusion/ej2-angular-buttons via ng add
• CSS/theme imports
• Rendering the first ejs-speeddial directive with items
• Standalone vs NgModule architecture

Items and Animation

📄 Read: references/speeddial-items-and-animation.md

• Configuring action items (SpeedDialItemModel: text, iconCss, id, title, disabled)
• Icon-only, text-only, and icon-with-text item variants
• Disabling individual items
• Configuring open/close animation (animation, SpeedDialAnimationSettingsModel)
• Supported animation effects (Fade, Zoom, etc.)

Display Modes

📄 Read: references/speeddial-display-modes.md

• Linear mode: list-like display with direction (Up, Down, Left, Right, Auto)
• Radial mode: circular pattern using mode='Radial'
• Configuring radial settings (radialSettings: direction, startAngle, endAngle, offset)
• Choosing mode based on use case

Position and Visibility

📄 Read: references/speeddial-position-and-visibility.md

• All nine position values (TopLeft → BottomRight)
• Using target to anchor Speed Dial within a container
• Opening items on hover via opensOnHover
• Programmatic show/hide using show() and hide() methods
• Refreshing button position using refreshPosition()
• Controlling visibility with visible property

Styles and Appearance

📄 Read: references/styles-and-appearance.md

• Button icon customization: openIconCss, closeIconCss, content
• Predefined CSS styles via cssClass (e-primary, e-success, e-warning, etc.)
• Enabling/disabling the component with disabled
• Controlling visibility with visible
• Hover open behavior with opensOnHover
• Item tooltip via title field
• Custom CSS class usage

Templates

📄 Read: references/speeddial-templates.md

• Item template using itemTemplate and <ng-template #itemTemplate>
• Popup template using popupTemplate and <ng-template #popupTemplate>
• Template context and binding

Events

📄 Read: references/speeddial-events.md

• clicked — action item clicked (SpeedDialItemEventArgs)
• created — component rendered
• beforeOpen / onOpen — popup opening lifecycle
• beforeClose / onClose — popup closing lifecycle
• beforeItemRender — each item rendered

Accessibility

📄 Read: references/speeddial-accessibility.md

• WCAG 2.2 and Section 508 compliance
• WAI-ARIA attributes (role, aria-label, aria-expanded, etc.)
• Keyboard shortcuts (Enter, Arrow keys, Esc, Home, End)
• Screen reader and RTL support

API Reference

📄 Read: references/speeddial-api.md

• All component properties with types and defaults
• All methods: show(), hide(), refreshPosition()
• All events with their argument types
• SpeedDialItemModel fields
• SpeedDialAnimationSettingsModel fields
• RadialSettingsModel fields

---

Quick Start

import { Component } from '@angular/core';
import { SpeedDialModule, SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [SpeedDialModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative; min-height:350px; border:1px solid;"></div>
    <button ejs-speeddial
      id="speeddial"
      content="Edit"
      openIconCss="e-icons e-edit"
      closeIconCss="e-icons e-close"
      target="#target"
      [items]="items"
      (clicked)="onItemClicked($event)">
    </button>
  `
})
export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut',   iconCss: 'e-icons e-cut' },
    { text: 'Copy',  iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
  ];

  public onItemClicked(args: any) {
    console.log(args.item.text + ' clicked');
  }
}

---

Common Patterns

Icon-only items with tooltips

public items: SpeedDialItemModel[] = [
  { iconCss: 'e-icons e-cut',   title: 'Cut' },
  { iconCss: 'e-icons e-copy',  title: 'Copy' },
  { iconCss: 'e-icons e-paste', title: 'Paste' }
];

Radial menu

<button ejs-speeddial id="speeddial"
  openIconCss="e-icons e-edit"
  closeIconCss="e-icons e-close"
  mode="Radial"
  position="MiddleCenter"
  target="#target"
  [items]="items"
  [radialSettings]="radialSettings">
</button>

public radialSettings: RadialSettingsModel = {
  direction: 'AntiClockwise',
  startAngle: 180,
  endAngle: 360,
  offset: '80px'
};

Modal overlay

<button ejs-speeddial id="speeddial"
  openIconCss="e-icons e-edit"
  [modal]="true"
  target="#target"
  [items]="items">
</button>

Programmatic show/hide

@ViewChild('speeddial') speeddialObj: SpeedDialComponent;

show() { this.speeddialObj.show(); }
hide() { this.speeddialObj.hide(); }

ProgressButton

The Syncfusion Angular ProgressButton (ejs-progressbutton) extends a standard button with built-in progress indication — a spinner and/or background filler UI — ideal for async operations, form submissions, or any action with a perceivable wait time.

Navigation Guide

Quick Start

# Install the package
ng add @syncfusion/ej2-angular-splitbuttons

// src/app/app.ts (Angular 20+) or app.component.ts (Angular 19 and below)
import { Component } from '@angular/core';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [ProgressButtonModule],
  selector: 'app-root',
  template: `
    <button ejs-progressbutton content="Upload" [enableProgress]="true"
            [duration]="3000">
    </button>
  `
})
export class AppComponent {}

/* styles.css — or import individually */
@import '@syncfusion/ej2-base/styles/material.css';
@import '@syncfusion/ej2-buttons/styles/material.css';
@import '@syncfusion/ej2-popups/styles/material.css';
@import '@syncfusion/ej2-splitbuttons/styles/material.css';

Common Patterns

Spinner on the right

template: `
  <button ejs-progressbutton content="Submit"
          [spinSettings]="{ position: 'Right' }">
  </button>
`

Background filler + animation

template: `
  <button ejs-progressbutton content="Download" [enableProgress]="true"
          [animationSettings]="{ effect: 'SlideLeft' }">
  </button>
`

Handle lifecycle events

template: `
  <button ejs-progressbutton content="Send"
          (begin)="onBegin($event)"
          (progress)="onProgress($event)"
          (end)="onEnd($event)"
          (fail)="onFail($event)">
  </button>
`
// Component class
onBegin(args: any)    { console.log('Started:', args.percent); }
onProgress(args: any) { console.log('Progress:', args.percent); }
onEnd(args: any)      { console.log('Completed'); }
onFail(args: any)     { console.log('Failed'); }

Programmatic control

@ViewChild('progressBtn') progressBtn!: ProgressButtonComponent;

startProgress()    { this.progressBtn.start(0); }
stopProgress()     { this.progressBtn.stop(); }
completeProgress() { this.progressBtn.progressComplete(); }

Switch

A lightweight toggle component (ejs-switch) for on/off binary input. Supports checked state, labels, disabled, sizing, two-way binding, form integration, custom styling, events, and full WCAG 2.2 accessibility.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation with ng add @syncfusion/ej2-angular-buttons
• Standalone component and NgModule setup
• Basic Switch with checked state
• CSS / SCSS theme imports
• Setting onLabel and offLabel text

Switch Features

📄 Read: references/switch-features.md

• Disabled state (disabled property)
• Size variants — default and small (cssClass: 'e-small')
• RTL support (enableRtl)
• Two-way data binding with ngModel
• Toggle programmatically with toggle() method
• State persistence across page reloads (enablePersistence)

Events & State Control

📄 Read: references/events-and-state.md

• change event — react to user-driven state flips
• beforeChange event — intercept and cancel state change
• created event — run logic after component renders
• click() and focusIn() native methods

Form Integration

📄 Read: references/form-integration.md

• name and value attributes for form POST
• Rules: disabled / unchecked values are NOT submitted
• Template-driven two-way binding with ngModel
• Grouping switches by name in a form

Customization

📄 Read: references/customization.md

• cssClass for custom styles
• Reshape bar/handle (square corners via CSS)
• Custom bar colors for on/off states
• Enable ripple effect on Switch labels
• Extra HTML attributes via htmlAttributes

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2 / Section 508 / ADA compliance
• WAI-ARIA: role="switch", aria-disabled
• Keyboard navigation (Space key to toggle)
• Screen reader support and RTL accessibility

API Reference

📄 Read: references/api.md

• All properties, methods, and events with types and defaults
• BeforeChangeEventArgs and ChangeEventArgs interfaces

---

Quick Start

ng add @syncfusion/ej2-angular-buttons

// src/app/app.ts (Angular 19+ standalone)
import { Component } from '@angular/core';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  standalone: true,
  imports: [SwitchModule],
  selector: 'app-root',
  template: `
    <ejs-switch [checked]="isOn" (change)="onToggle($event)"></ejs-switch>
  `
})
export class AppComponent {
  isOn = false;

  onToggle(args: any): void {
    console.log('Switch is now:', args.checked);
  }
}

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

---

Common Patterns

Checked by default

<ejs-switch [checked]="true"></ejs-switch>

With ON / OFF labels

<ejs-switch [checked]="true" onLabel="ON" offLabel="OFF"></ejs-switch>

Labels are not displayed in Material themes. Avoid long custom text.

Small size

<ejs-switch cssClass="e-small"></ejs-switch>

Disabled

<ejs-switch [disabled]="true"></ejs-switch>

Two-way binding

<ejs-switch [(ngModel)]="isEnabled"></ejs-switch>
<p>State: {{ isEnabled }}</p>

Prevent state change conditionally

<ejs-switch (beforeChange)="onBeforeChange($event)"></ejs-switch>

onBeforeChange(args: BeforeChangeEventArgs): void {
  // Cancel if condition not met
  if (!this.canToggle) {
    args.cancel = true;
  }
}

Programmatic toggle

@ViewChild('switch') switchObj!: SwitchComponent;

toggle(): void {
  this.switchObj.toggle();
}

RadioButton

The Syncfusion Angular RadioButton (ejs-radiobutton) is a form input component that lets users select exactly one option from a group. It supports labels, size variants, two-way binding, form integration, accessibility, and extensive customization.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Angular 19+/21 standalone setup
• Package installation via ng add
• CSS/SCSS theme imports
• Minimal RadioButton example
• Running the application

Labels, Sizes & States

📄 Read: references/label-size-states.md

• label and labelPosition (Before/After)
• Size variants: default and small (e-small)
• checked and unchecked states
• disabled state
• enablePersistence

Forms & Data Binding

📄 Read: references/forms-and-binding.md

• name attribute for grouping radio buttons
• value attribute for form submission
• Which values are sent on form submit
• Two-way binding with [(ngModel)]
• Binding a RadioButton group to a DropDownList

Customization & Advanced Features

📄 Read: references/customization-and-advanced.md

• Custom CSS classes and appearance styles
• Right-to-left (enableRtl)
• htmlAttributes for ARIA and data attributes
• enableHtmlSanitizer and locale
• Methods: getSelectedValue(), click(), focusIn(), destroy()

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2, Section 508, ADA compliance
• WAI-ARIA attributes
• Keyboard navigation shortcuts
• Screen reader support

API Reference

📄 Read: references/api.md

• All properties with types, defaults, and usage examples
• All methods with signatures
• Events and ChangeArgs interface

---

Quick Start

import { Component } from '@angular/core';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  standalone: true,
  imports: [RadioButtonModule],
  selector: 'app-root',
  template: `
    <ejs-radiobutton label="Option A" name="choice" value="a" [checked]="true"></ejs-radiobutton>
    <ejs-radiobutton label="Option B" name="choice" value="b"></ejs-radiobutton>
    <ejs-radiobutton label="Option C" name="choice" value="c"></ejs-radiobutton>
  `
})
export class AppComponent {}

Always set a shared name attribute on buttons that belong to the same group — this enforces mutual exclusivity.

---

Common Patterns

Detect Selection Change

template: `
  <ejs-radiobutton label="Credit Card" name="payment" value="credit"
    (change)="onPaymentChange($event)">
  </ejs-radiobutton>
  <ejs-radiobutton label="Debit Card" name="payment" value="debit"
    (change)="onPaymentChange($event)">
  </ejs-radiobutton>
`

onPaymentChange(args: ChangeArgs): void {
  console.log('Selected value:', args.value);  // 'credit' or 'debit'
}

Two-Way Binding with ngModel

// All buttons share [(ngModel)]="selectedValue"
template: `
  <ejs-radiobutton label="Monthly" name="plan" value="monthly"
    [(ngModel)]="selectedPlan">
  </ejs-radiobutton>
  <ejs-radiobutton label="Annual" name="plan" value="annual"
    [(ngModel)]="selectedPlan">
  </ejs-radiobutton>
  <p>Selected: {{ selectedPlan }}</p>
`

Small Size Variant

<ejs-radiobutton label="Small Option" name="size" cssClass="e-small"></ejs-radiobutton>

Disabled RadioButton

<ejs-radiobutton label="Unavailable" name="plan" [disabled]="true"></ejs-radiobutton>

---

Key Properties at a Glance

For the full API, read `references/api.md`.

SplitButton

A comprehensive guide for implementing the Syncfusion Essential JS 2 SplitButton component in Angular applications. Learn to create split buttons with dropdown menus, manage items, handle events, customize styling, and integrate with forms.

SplitButton Overview

The Syncfusion Angular SplitButton component is a versatile UI control that combines a primary button with a dropdown menu:

• Dual-action design: Primary action button + dropdown menu with multiple options
• Item management: Configure items with text, icons, separators, URLs, and disable states
• Event system: click (primary), select (item), open, close, beforeOpen events
• Popup control: Placement options, collision detection, offset adjustment, auto-positioning
• Icon support: Material Design icons, Font Awesome, Bootstrap icons, custom fonts
• Customization: CSS classes, themes (Material, Bootstrap, Fabric, Tailwind), dark mode
• Template support: Item templates with HTML content, image icons, custom rendering
• Accessibility: Full WCAG 2.2 compliance, keyboard navigation, ARIA attributes, RTL support
• Forms integration: Reactive Forms and template-driven forms support
• Dynamic updates: Add/remove items, update properties at runtime, state management

Package: @syncfusion/ej2-angular-splitbuttons

Documentation Navigation

Read the following references based on your specific needs:

Getting Started

📄 Read: references/getting-started.md

• Package installation and module setup
• CSS theme imports and dependencies
• Basic SplitButton implementation
• Component initialization with items
• Event handler setup
• Running and testing setup

Button Items Configuration

📄 Read: references/button-items-configuration.md

• ItemModel interface and properties
• Text and icon configuration
• URL navigation and external links
• Separators between items
• Item disable/enable states
• Dynamic item management
• Item click event handling

Events & Methods

📄 Read: references/events-and-methods.md

• click event (primary button action)
• select event (item selection from dropdown)
• open event (dropdown opens)
• close event (dropdown closes)
• beforeOpen event (before dropdown opens)
• Methods: toggle(), addItems(), removeItems(), focusIn()
• ViewChild access patterns
• Event argument types and handling

Styling & Customization

📄 Read: references/styling-and-customization.md

• CSS class customization (.e-split-button, .e-dropdown-popup)
• Icon configuration (iconCss, prefix, suffix properties)
• Icon positioning (left, right, top, bottom)
• Theme selection (Material, Bootstrap, Fabric, Tailwind)
• Dark mode implementation
• RTL (Right-to-Left) support
• Custom CSS overrides and sizing

Templates & Icons

📄 Read: references/templates-and-icons.md

• Icon font libraries (Material Design, Bootstrap, Font Awesome)
• Icon positioning and sizing
• Item templates with HTML content
• Image icons and custom graphics
• Content templates for rich styling
• Multiple icon combinations
• Icon alignment and spacing

Popup Behavior & Target Customization

📄 Read: references/popup-positioning.md

• Default popup behavior (auto opens below button)
• popupWidth property — fixed popup width
• target property — custom popup content (color picker, ListView, etc.)
• createPopupOnClick — deferred popup creation
• closeActionEvents — custom dismiss trigger
• Grouped items with ListView as target
• Edge cases: fixed toolbar, modal dialogs, scrollable containers

Accessibility & Globalization

📄 Read: references/accessibility-and-globalization.md

• WCAG 2.2 and Section 508 compliance
• ARIA roles and attributes (role="button", aria-haspopup, aria-expanded)
• Keyboard navigation (Tab, Enter, Escape, Arrow Keys)
• Screen reader compatibility and announcements
• RTL (Right-to-Left) layout support
• Localization and locale property usage
• Language-specific formatting and translations

Reactive Forms Integration

📄 Read: references/reactive-forms-integration.md

• FormControl integration with SplitButton
• FormGroup and form binding
• Validation rules and error states
• Form state changes and subscriptions
• Programmatic control and updates
• Reset and submit patterns
• Disabled state management

API Reference

📄 Read: references/api-reference.md

• All 16 official properties: content, items, iconCss, iconPosition, cssClass, disabled, enableRtl, target, popupWidth, animationSettings, closeActionEvents, createPopupOnClick, enableHtmlSanitizer, enablePersistence, locale
• Official methods: toggle(), addItems(), removeItems(), focusIn(), getPersistData(), onPropertyChanged()
• All 8 official events with correct event arg interfaces
• ItemModel interface: text, id, iconCss, url, separator, disabled
• SplitButtonIconPosition enum: "Left" | "Top"
• Event arg interfaces: BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs, MenuEventArgs, ClickEventArgs

Quick Start Example

// app.component.ts
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Dropdown items
  public dropdownItems: ItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];
  
  // Primary button action handler
  onPrimaryClick(): void {
    console.log('Primary action clicked');
  }
  
  // Item selection handler
  onItemSelect(args: any): void {
    console.log('Selected item:', args.item.text);
  }
}

<!-- app.component.html -->
<div style="padding: 20px; font-family: Arial, sans-serif;">
  <h2>Basic SplitButton</h2>
  <ejs-splitbutton 
    content="Paste"
    [items]="dropdownItems"
    (click)="onPrimaryClick()"
    (select)="onItemSelect($event)">
  </ejs-splitbutton>
</div>

/* app.component.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';

:host ::ng-deep .e-split-button {
  margin: 10px;
}

Common Patterns

Pattern 1: Action Menu with Icons

When you need a split button with icon-rich dropdown menu:

export class AppComponent {
  public fileActions: ItemModel[] = [
    { text: 'Save', iconCss: 'e-icons e-save' },
    { text: 'Save As', iconCss: 'e-icons e-save-as' },
    { separator: true },
    { text: 'Export', iconCss: 'e-icons e-export' },
    { text: 'Print', iconCss: 'e-icons e-print' }
  ];
  
  onFileAction(args: any): void {
    const action = args.item.text;
    console.log(`File action: ${action}`);
    // Execute based on selected action
  }
}

Pattern 2: Conditional Item Enable/Disable

When you need to enable/disable menu items based on application state:

export class AppComponent {
  @ViewChild('splitBtn') splitButtonRef!: SplitButtonComponent;
  
  isEditMode: boolean = false;
  
  public items: ItemModel[] = [
    { text: 'Edit', disabled: true },
    { text: 'Delete', disabled: true },
    { text: 'Duplicate' }
  ];
  
  toggleEditMode(): void {
    this.isEditMode = !this.isEditMode;
    // Update item disabled states
    this.items[0].disabled = !this.isEditMode;
    this.items[1].disabled = !this.isEditMode;
  }
  
  onItemSelect(args: any): void {
    if (!args.item.disabled) {
      console.log('Executing:', args.item.text);
    }
  }
}

Pattern 3: Dynamic Item Management

When you need to add/remove items at runtime:

export class AppComponent {
  @ViewChild('splitBtn') splitButtonRef!: SplitButtonComponent;
  
  public items: ItemModel[] = [];
  
  ngOnInit(): void {
    // Load initial items
    this.loadItems();
  }
  
  loadItems(): void {
    this.items = [
      { text: 'Item 1' },
      { text: 'Item 2' },
      { text: 'Item 3' }
    ];
  }
  
  addItem(text: string): void {
    this.items.push({ text: text });
  }
  
  removeItem(index: number): void {
    this.items.splice(index, 1);
  }
  
  clearAllItems(): void {
    this.items = [];
  }
}

Pattern 4: Item Navigation with URLs

When you need menu items to navigate to different URLs. Note: ItemModel only supports url; the open-target (_blank, _self) must be handled in (select):

export class AppComponent {
  public navigationItems: ItemModel[] = [
    { id: 'home',    text: 'Home',          url: '/' },
    { id: 'docs',    text: 'Documentation', url: '/docs' },
    { separator: true },
    { id: 'github',  text: 'GitHub',        url: 'https://github.com' },
    { id: 'support', text: 'Support',       url: 'https://support.syncfusion.com' }
  ];
  
  onNavigate(args: any): void {
    const itemUrl: string = args.item.url;
    if (!itemUrl) return;
    // Open external URLs in new tab, internal in same tab
    const isExternal = itemUrl.startsWith('http');
    window.open(itemUrl, isExternal ? '_blank' : '_self');
  }
}

Pattern 5: Custom Popup Width and Target

When you need a fixed popup width or a completely custom popup element:

import { Component } from '@angular/core';
import { ItemModel, SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [SplitButtonModule],
  selector: 'app-root',
  template: `
    <!-- Fixed-width popup -->
    <ejs-splitbutton
      content="Actions"
      [items]="items"
      popupWidth="250px"
      (beforeOpen)="onBeforeOpen($event)"
      (open)="onOpen()"
      (close)="onClose()">
    </ejs-splitbutton>
  `
})
export class AppComponent {
  public items: ItemModel[] = [
    { text: 'Save',   iconCss: 'e-icons e-save' },
    { text: 'Export', iconCss: 'e-icons e-export' },
    { text: 'Print',  iconCss: 'e-icons e-print' }
  ];

  onBeforeOpen(args: any): void {
    console.log('Popup about to open');
  }

  onOpen(): void {
    console.log('Popup opened');
  }

  onClose(): void {
    console.log('Popup closed');
  }
}

Key Props Reference

⚠️ Note: position, title and open()/close() methods do not exist in the official API. Use toggle() for programmatic open/close. See `references/api-reference.md` for the full authoritative API.

Common Use Cases

Use Case 1: Document Toolbar

• Primary action (Save), dropdown with Save As, Export, Print
• Icons for visual clarity
• Disable Save when no changes
• Solution: Combine iconCss with dynamic disable states
• Reference: Button Items Configuration + Styling & Customization

Use Case 2: Form Actions Menu

• Primary button (Submit), dropdown with Save Draft, Schedule, Delete
• Disable options based on form state
• Handle each action differently
• Solution: Use select event with item tracking
• Reference: Events & Methods + Reactive Forms Integration

Use Case 3: Navigation Menu

• Primary action (Dashboard), dropdown with other pages
• External links to documentation or support
• RTL support for international apps
• Solution: Use url property and target attribute
• Reference: Button Items Configuration + Accessibility & Globalization

Use Case 4: Settings Panel

• Accessible split button with keyboard navigation
• Screen reader compatible
• WCAG 2.2 compliant
• Solution: Use proper ARIA attributes and keyboard handlers
• Reference: Accessibility & Globalization

Use Case 5: Responsive Toolbar

• Split button with adaptive positioning
• Responsive popup on small screens
• Touch-friendly spacing
• Solution: Use dynamic positioning and responsive CSS
• Reference: Popup Positioning + Styling & Customization

Chips

The Syncfusion Angular Chips (ejs-chiplist) component renders compact, interactive elements representing inputs, attributes, or actions. It supports single/multiple selection, deletion, drag-and-drop, avatars, icons, templates, and rich styling.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation and package setup (@syncfusion/ej2-angular-buttons)
• CSS/theme imports
• Rendering a basic chip or chip list
• Single chip vs. chip list with e-chips / e-chip
• Running the application

Types and Selection

📄 Read: references/types-and-selection.md

• Four chip types: Input, Choice, Filter, Action
• Single selection (selection="Single") — choice chips
• Multiple selection (selection="Multiple") — filter chips
• Deletable chips ([enableDelete]="true")
• Pre-selecting chips with [selectedChips]
• Click events ((click)) for action chips

Customization

📄 Read: references/customization.md

• Predefined styles: e-primary, e-success, e-info, e-warning, e-danger
• Leading icon (leadingIconCss, leadingIconUrl)
• Avatar image (avatarIconCss) and avatar text (avatarText)
• Trailing icon (trailingIconCss, trailingIconUrl)
• Outline chip (cssClass="e-outline")
• Custom chip template (template)
• htmlAttributes for custom HTML attributes

Drag and Drop

📄 Read: references/drag-and-drop.md

• Enabling drag and drop ([allowDragAndDrop]="true")
• Restricting drag area (dragArea)
• Drag events: dragStart, dragging, dragStop
• Cross-container drag and drop

Style Customization

📄 Read: references/style.md

• CSS overrides for chip text, icon, delete button
• Outline chip border styling
• Selected chip background and color
• Avatar text background styling
• Chip height/size customization

Accessibility

📄 Read: references/accessibility.md

• WCAG 2.2, Section 508, ADA compliance
• WAI-ARIA attributes (role, aria-selected, aria-disabled, etc.)
• Keyboard navigation shortcuts
• RTL support, screen reader support

API Reference

📄 Read: references/api.md

• All properties: text, chips, selection, enableDelete, cssClass, selectedChips, enabled, enableRtl, enablePersistence, allowDragAndDrop, dragArea, htmlAttributes, leadingIconCss, leadingIconUrl, avatarIconCss, avatarText, trailingIconCss, trailingIconUrl
• Methods: add(), remove(), find(), getSelectedChips(), select(), destroy()
• Events: click, beforeClick, created, delete, deleted, dragStart, dragging, dragStop

Quick Start

import { Component } from '@angular/core';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChipListModule],
  template: `
    <ejs-chiplist id="chip-list">
      <e-chips>
        <e-chip text="Angular"></e-chip>
        <e-chip text="Vue"></e-chip>
        <e-chip text="Svelte"></e-chip>
      </e-chips>
    </ejs-chiplist>
  `
})
export class AppComponent {}

CSS (src/styles.css):

@import '~@syncfusion/ej2-base/styles/tailwind3.css';
@import '~@syncfusion/ej2-angular-buttons/styles/tailwind3.css';

Common Patterns

Filter chips (multi-select)

<ejs-chiplist selection="Multiple">
  <e-chips>
    <e-chip text="Angular"></e-chip>
    <e-chip text="Vue"></e-chip>
    <e-chip text="Svelte"></e-chip>
  </e-chips>
</ejs-chiplist>

Deletable chips with event

<ejs-chiplist [enableDelete]="true" (delete)="onChipDelete($event)">
  <e-chips>
    <e-chip text="Tag One"></e-chip>
    <e-chip text="Tag Two"></e-chip>
  </e-chips>
</ejs-chiplist>

Chips with avatar initials

<ejs-chiplist>
  <e-chips>
    <e-chip text="Andrew" avatarText="A"></e-chip>
    <e-chip text="Laura" avatarText="L"></e-chip>
  </e-chips>
</ejs-chiplist>

Programmatic control (add/remove chips via ViewChild)

import { Component, ViewChild } from '@angular/core';
import { ChipListComponent, ChipListModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  selector: 'app-chip-demo',
  standalone: true,
  imports: [ChipListModule],
  template: `
    <ejs-chiplist #chipList id="chip-list">
      <e-chips>
        <e-chip text="Angular"></e-chip>
        <e-chip text="Vue"></e-chip>
      </e-chips>
    </ejs-chiplist>
  `
})
export class ChipDemoComponent {
  @ViewChild('chipList') chipList?: ChipListComponent;

  addChip() {
    this.chipList?.add('New Tag');
  }

  removeFirstChip() {
    this.chipList?.remove([0]);
  }

  getSelected() {
    const selected = this.chipList?.getSelectedChips();
    console.log(selected);
  }
}

Accessibility — Syncfusion Angular Button

Table of Contents

• Overview
• Compliance Summary
• WAI-ARIA Attributes
• Keyboard Interaction
• Screen Reader Support
• Ensuring Accessibility in Your App

---

Overview

The Syncfusion Angular Button component is built to meet accessibility guidelines including:

• ADA (Americans with Disabilities Act)
• Section 508
• WCAG 2.2 (Web Content Accessibility Guidelines)
• WAI-ARIA roles and patterns

---

Compliance Summary

---

WAI-ARIA Attributes

The Button component follows the WAI-ARIA button pattern.

Icon-only button example:

When using a round or icon-only button with no text content, add aria-label to describe the action:

<!-- Without aria-label: screen readers announce nothing meaningful -->
<button ejs-button cssClass="e-round" iconCss="e-icons e-plus" [isPrimary]="true"></button>

<!-- With aria-label: accessible to screen reader users -->
<button ejs-button cssClass="e-round" iconCss="e-icons e-plus"
  [isPrimary]="true" aria-label="Add item"></button>

Important: Predefined color styles (e-primary, e-danger, etc.) convey meaning visually only. Do not rely on color alone — always pair with descriptive button text or aria-label.

---

Keyboard Interaction

The Button component follows the WAI-ARIA keyboard interaction guideline for buttons:

Disabled buttons (when [disabled]="true") are removed from the tab order and cannot be focused.

---

Screen Reader Support

• Button text content is automatically announced by screen readers.
• For icon-only buttons, use aria-label to describe the button action.
• For toggle buttons, consider adding aria-pressed to communicate the active/inactive state to assistive technologies:

import { ButtonModule, ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <button #togglebtn ejs-button cssClass="e-flat" [isToggle]="true"
      [attr.aria-pressed]="isActive"
      (click)="onToggle()">
      {{ isActive ? 'Pause' : 'Play' }}
    </button>
  `
})
export class AppComponent {
  isActive = false;

  onToggle() {
    this.isActive = !this.isActive;
  }
}

---

Ensuring Accessibility in Your App

Syncfusion validates Button accessibility using:

• [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) — automated WCAG checks
• [axe-core](https://www.npmjs.com/package/axe-core) — automated accessibility rule engine

Best practices for your implementation:

1. Always provide visible text or aria-label for every button. 2. Don't use color alone to communicate button purpose — pair e-danger or e-success with descriptive text. 3. Test with keyboard navigation — tab to the button and use Space/Enter to activate it. 4. Test with a screen reader (NVDA, VoiceOver, or JAWS) to verify announced labels and states. 5. Ensure sufficient color contrast — the default Syncfusion themes meet WCAG AA contrast ratios.

API Reference — Syncfusion Angular Button

Source: https://ej2.syncfusion.com/angular/documentation/api/button/index-default

Table of Contents

• Import
• Directive
• Properties
• Methods
• Events
• Usage Examples

---

Import

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
// For ViewChild / programmatic access:
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

---

Directive

Apply ejs-button as an attribute directive on a native <button> HTML element:

<button ejs-button>Button</button>

---

Properties

content — string

Defines the text content rendered inside the button element.

• Default: ""
• Text can also be placed as inner content of the <button> tag. When both inner text and content are present, content takes precedence.

<button ejs-button content="Save"></button>
<!-- Or via property binding -->
<button ejs-button [content]="buttonLabel"></button>

---

cssClass — string

Defines one or more CSS classes (space-separated) to apply to the button element. Controls button type, color style, size, and custom appearance.

• Default: ""
• Built-in values: e-primary, e-success, e-info, e-warning, e-danger, e-link, e-flat, e-outline, e-round, e-small, e-block

<button ejs-button cssClass="e-primary">Primary</button>
<button ejs-button cssClass="e-small e-outline">Small Outline</button>
<button ejs-button [cssClass]="dynamicClass">Dynamic</button>

---

disabled — boolean

Specifies whether the button is disabled. A disabled button is non-interactive, cannot receive focus, and does not fire click events.

• Default: false

<button ejs-button [disabled]="true">Disabled</button>
<button ejs-button [disabled]="isFormInvalid">Submit</button>

---

enableHtmlSanitizer — boolean

When true, the component sanitizes untrusted HTML strings and scripts in the content property before rendering, preventing XSS vulnerabilities.

• Default: true

<!-- Default (sanitizer on) — safe for user-provided content -->
<button ejs-button [enableHtmlSanitizer]="true" content="<b>Bold</b>"></button>

<!-- Sanitizer off — only use with fully trusted content -->
<button ejs-button [enableHtmlSanitizer]="false" content="<b>Bold Label</b>"></button>

Keep this as true (default) unless you need to render trusted HTML markup in the button label. Disabling it without proper validation introduces a security risk.

---

enablePersistence — boolean

When true, the component's state is persisted across page reloads using the browser's local storage.

• Default: false

<button ejs-button [enablePersistence]="true" [isToggle]="true">Toggle</button>

---

enableRtl — boolean

When true, renders the component in right-to-left (RTL) direction. Useful for Arabic, Hebrew, and other RTL scripts.

• Default: false

<button ejs-button [enableRtl]="true" iconCss="e-btn-icons e-setting-icon">Settings</button>

---

iconCss — string

Defines one or more CSS classes (space-separated) for an icon to display within the button. Supports Syncfusion built-in icons (e-icons class prefix) and third-party icon libraries.

• Default: ""

<!-- Syncfusion built-in icon -->
<button ejs-button iconCss="e-icons e-save">Save</button>

<!-- Third-party icon (e.g., Font Awesome) -->
<button ejs-button iconCss="fa fa-home">Home</button>

---

iconPosition — string | IconPosition

Controls where the icon appears relative to the button text.

• Default: "Left" (IconPosition.Left)
• Accepted values: "Left" | "Right"

<!-- Icon on the left (default) -->
<button ejs-button iconCss="e-icons e-save">Save</button>

<!-- Icon on the right -->
<button ejs-button iconCss="e-icons e-send" iconPosition="Right">Send</button>

---

isPrimary — boolean

Enhances the visual appearance of the button with a primary/emphasized style when set to true.

• Default: false
• Functionally equivalent to cssClass="e-primary".

<button ejs-button [isPrimary]="true">Primary</button>

Prefer cssClass="e-primary" for consistency with other color style classes unless you specifically need the boolean isPrimary property binding.

---

isToggle — boolean

Makes the button a toggle button. When clicked, the state changes between normal and active. In the active state, Syncfusion applies the e-active CSS class to the element.

• Default: false

<button #toggleBtn ejs-button [isToggle]="true" cssClass="e-flat" content="Play"></button>

---

Methods

Methods are accessed via @ViewChild on a ButtonComponent reference.

click() — void

Programmatically triggers the button's native click action.

import { ButtonModule, ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <button #btn ejs-button>Action</button>
    <button (click)="triggerClick()">Trigger Programmatically</button>
  `
})
export class AppComponent {
  @ViewChild('btn') btnRef: ButtonComponent | any;

  triggerClick(): void {
    this.btnRef.click();
  }
}

---

focusIn() — void

Programmatically sets focus to the button element (native focus).

@ViewChild('btn') btnRef: ButtonComponent | any;

focusButton(): void {
  this.btnRef.focusIn();
}

---

destroy() — void

Destroys the ButtonComponent instance and cleans up event listeners and DOM modifications.

@ViewChild('btn') btnRef: ButtonComponent | any;

cleanup(): void {
  this.btnRef.destroy();
}

In Angular, destroy() is rarely needed — Angular's component lifecycle handles cleanup automatically via ngOnDestroy. Use it only in advanced scenarios where you control the button lifecycle outside Angular's component tree.

---

Events

created — EmitType<Event>

Fires once after the component has fully rendered. Use it for post-render DOM operations, such as setting native attributes or programmatic focus.

import { ButtonModule, ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <button #btn ejs-button [isPrimary]="true" (created)="onCreated()">Submit</button>
  `
})
export class AppComponent {
  @ViewChild('btn') private btn: ButtonComponent | any;

  onCreated(): void {
    this.btn.element.setAttribute('title', 'Click to submit the form');
  }
}

---

Usage Examples

All properties in one component

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <button ejs-button
      content="Save"
      cssClass="e-primary"
      [disabled]="false"
      [enableHtmlSanitizer]="true"
      [enablePersistence]="false"
      [enableRtl]="false"
      iconCss="e-icons e-save"
      iconPosition="Left"
      [isPrimary]="false"
      [isToggle]="false"
      (created)="onCreated()">
    </button>
  `
})
export class AppComponent {
  onCreated() {
    console.log('Button rendered');
  }
}

Toggle button with state management

import { ButtonModule, ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild, HostListener } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <button #togglebtn ejs-button cssClass="e-flat"
      iconCss="e-icons e-play"
      [isToggle]="true"
      content="Play">
    </button>
  `
})
export class AppComponent {
  @ViewChild('togglebtn') togglebtn: ButtonComponent | any;

  @HostListener('click', ['togglebtn'])
  btnClick() {
    if (this.togglebtn.element.classList.contains('e-active')) {
      this.togglebtn.content = 'Pause';
      this.togglebtn.iconCss = 'e-icons e-pause';
    } else {
      this.togglebtn.content = 'Play';
      this.togglebtn.iconCss = 'e-icons e-play';
    }
  }
}

Dynamic disabled state

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <button ejs-button [disabled]="!agreed" cssClass="e-primary">Proceed</button>
    <label>
      <input type="checkbox" [(ngModel)]="agreed"> I agree to the terms
    </label>
  `
})
export class AppComponent {
  agreed = false;
}

EJ1 to EJ2 API Migration — Syncfusion Angular Button

Table of Contents

• Overview
• Properties Migration
• Methods Migration
• Events Migration
• Key Differences Summary

---

Overview

This guide describes the API changes when migrating from Syncfusion Essential JS 1 (ej-button) to Essential JS 2 (ejs-button) for the Angular Button component.

EJ1 directive: ej-button EJ2 directive: ejs-button

---

Properties Migration

---

Methods Migration

---

Events Migration

---

Key Differences Summary

1. `text` → `content`: Label property renamed. 2. `prefixIcon` → `iconCss`: Icon CSS class property renamed; icon class format changed from e-icon e-save (EJ1) to e-icons e-save (EJ2). 3. `imagePosition` → `iconPosition`: Icon position property renamed; values simplified ("ImageRight" → "Right"). 4. `[enabled]="false"` → `[disabled]="true"`: Disabled logic inverted — EJ1 used enabled (default: true), EJ2 uses disabled (default: false). 5. `enableRTL` → `enableRtl`: Casing changed (RTL → Rtl). 6. `size="small"` → `cssClass="e-small"`: Size is now controlled via CSS class, not a separate property. 7. `repeatButton` removed: Repeat button behavior must be implemented manually using mousedown/mouseup/touchstart/touchend events with setInterval. 8. `suffixIcon`, `htmlAttributes`, `width`, `height`, `showRoundedCorner`, `timeInterval` removed: These EJ1-specific properties have no EJ2 equivalents. 9. New in EJ2: isPrimary, isToggle, enableHtmlSanitizer, enablePersistence are new properties with no EJ1 equivalent.

Getting Started — Syncfusion Angular Button

Table of Contents

• Prerequisites
• Dependencies
• Set Up the Angular Application
• Install Syncfusion Angular Buttons Package
• Import CSS Styles
• Add the Button Component
• Run the Application
• Change Button Type

---

Prerequisites

Ensure your environment meets the Syncfusion Angular system requirements:

• Angular 12+ (Angular 21 recommended, standalone architecture is default from Angular 19+)
• Node.js (LTS version recommended)
• Angular CLI installed globally

---

Dependencies

The ejs-button directive requires the following packages:

@syncfusion/ej2-angular-buttons
  └── @syncfusion/ej2-angular-base
  └── @syncfusion/ej2-buttons
        └── @syncfusion/ej2-base

---

Set Up the Angular Application

Install Angular CLI globally:

npm install -g @angular/cli

Create a new Angular application:

ng new syncfusion-angular-app

During setup, select your preferred stylesheet format (CSS or SCSS). Navigate into the project:

cd syncfusion-angular-app

Angular version note: In Angular 20+, the CLI generates src/app/app.ts, app.html, and app.css (no .component. suffix). In Angular 19 and below, the files are app.component.ts, app.component.html, and app.component.css.

---

Install Syncfusion Angular Buttons Package

Use the ng add command — it installs the package, imports it, and registers the default Material theme automatically:

ng add @syncfusion/ej2-angular-buttons

This command:

• Adds @syncfusion/ej2-angular-buttons and peer dependencies to package.json
• Imports ButtonModule in your application
• Registers the default Syncfusion Material theme in angular.json

For applications using legacy Angular compatibility compiler (ngcc) with Angular 15 and below:

npm add @syncfusion/ej2-angular-buttons@32.1.19-ngcc

Starting from Angular 16, ngcc support has been removed. Use Ivy-compatible packages.

---

Import CSS Styles

The Material theme is added automatically by ng add. To style only the Button component explicitly:

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

Import order must follow the component's dependency sequence (ej2-base before ej2-buttons).

For other themes (Tailwind, Bootstrap, Fabric), replace material with the theme name:

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';

---

Add the Button Component

Use ejs-button as an attribute directive on a <button> element. Import ButtonModule in your standalone component:

// src/app/app.ts (Angular 20+) or src/app/app.component.ts (Angular 19 and below)
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <!-- Render a default Button -->
      <button ejs-button>Button</button>
    </div>
  `
})
export class AppComponent { }

Bootstrap your standalone component in main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

---

Run the Application

ng serve

Open http://localhost:4200 in a browser to see the button rendered.

---

Change Button Type

Use the cssClass property to apply predefined styles. Use the content property to set the button label in the template:

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <!-- Flat button with content set via property binding -->
      <button ejs-button cssClass="e-flat" content="Flat Button"></button>

      <!-- Or pass text directly inside the element -->
      <button ejs-button cssClass="e-primary">Primary</button>
    </div>
  `
})
export class AppComponent { }

Gotcha: When using the ejs-button directive, button text can be provided as inner text OR via the content property. When both are present, the content property takes precedence.

How-To Patterns — Syncfusion Angular Button

Table of Contents

• Create a Block (Full-Width) Button
• Create a Rounded-Corner Button
• Add a Navigation Link to a Button
• Customize Button Appearance with CSS
• Style Native Input and Anchor Elements as Buttons
• Set the Disabled State
• Enable Right-to-Left (RTL) Support
• Add a Tooltip on Hover
• Implement a Repeat Button

---

Create a Block (Full-Width) Button

A block button spans the full width of its parent container. Set cssClass to e-block:

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button cssClass="e-block">Block Button</button>
      <button ejs-button cssClass="e-block e-primary">Primary Block Button</button>
      <button ejs-button cssClass="e-block e-success">Success Block Button</button>
    </div>
  `
})
export class AppComponent { }

Combine e-block with any color style class using space-separated values in cssClass.

---

Create a Rounded-Corner Button

Rounded corners are achieved by defining a custom CSS class with border-radius and applying it via cssClass:

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  // Define .e-round-corner in your component styles or global styles.css
  template: `
    <div class="e-section-control">
      <button ejs-button cssClass="e-round-corner">Button</button>
    </div>
  `
})
export class AppComponent { }

CSS class definition:

.e-round-corner {
  border-radius: 5px;
}

This is different from e-round (which creates a fully circular button). e-round-corner just adds a subtle border radius to a regular button shape.

---

Add a Navigation Link to a Button

Wrap an <a> tag with href inside the <button> element and apply e-link via cssClass:

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button cssClass="e-link">
        <a href="https://www.google.com/" target="_blank">Go to Google</a>
      </button>
    </div>
  `
})
export class AppComponent { }

For Angular navigation, use [routerLink] inside the <a> tag instead of href.

---

Customize Button Appearance with CSS

Define a custom CSS class with your desired styles, and apply it via cssClass. The class targets button states: default, hover, focus, and active.

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <!-- Apply your custom class via cssClass -->
      <button ejs-button cssClass="e-custom">Custom</button>
    </div>
  `
})
export class AppComponent { }

Example CSS (define in component styles or global styles.css):

/* Default state */
.e-btn.e-custom {
  background-color: #4a148c;
  color: #fff;
  height: 36px;
  border-radius: 0;
  border: none;
}

/* Hover state */
.e-btn.e-custom:hover {
  background-color: #6a1cbc;
  color: #fff;
}

/* Focus state */
.e-btn.e-custom:focus {
  background-color: #4a148c;
  box-shadow: 0 0 0 2px #b39ddb;
}

/* Active state */
.e-btn.e-custom:active {
  background-color: #38006b;
  color: #fff;
}

Always target .e-btn.e-custom (both classes together) to override Syncfusion's default button styles correctly.

---

Style Native Input and Anchor Elements as Buttons

Apply e-btn plus a style class directly to <input> or <a> elements — no ejs-button directive needed:

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <!-- Input styled as a link button -->
      <input type="button" value="Input Button" class="e-btn e-link">

      <!-- Anchor styled as a primary button -->
      <a class="e-btn e-primary" href="#">Go</a>
    </div>
  `
})
export class AppComponent { }

Use this pattern when you need semantic HTML elements (for form submissions, anchors) with Syncfusion button styling.

---

Set the Disabled State

Bind [disabled]="true" to prevent interaction. A disabled button cannot receive focus or trigger events:

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button [disabled]="true">Disabled</button>
    </div>
  `
})
export class AppComponent { }

To toggle disabled state dynamically from the component class:

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <button ejs-button [disabled]="isDisabled">Action</button>
    <button ejs-button (click)="toggleDisabled()">Toggle</button>
  `
})
export class AppComponent {
  isDisabled = false;

  toggleDisabled() {
    this.isDisabled = !this.isDisabled;
  }
}

---

Enable Right-to-Left (RTL) Support

Set [enableRtl]="true" to reverse the layout direction — useful for Arabic, Hebrew, and other RTL languages:

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button iconCss="e-btn-icons e-setting-icon" [enableRtl]="true">Settings</button>
    </div>
  `
})
export class AppComponent { }

In RTL mode, the icon position flips: a left icon appears on the right in the visual layout.

---

Add a Tooltip on Hover

Use the created event to set the native title attribute on the button element after rendering. The browser renders this as a native tooltip:

import { ButtonModule, ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button #btn ejs-button [isPrimary]="true" (created)="onCreated()">Button</button>
    </div>
  `
})
export class AppComponent {
  @ViewChild('btn') private btn: ButtonComponent | any;

  onCreated() {
    this.btn.element.setAttribute('title', 'Primary Button');
  }
}

For rich tooltip UI (HTML content, custom positioning), integrate the Syncfusion Tooltip component instead of relying on the native title attribute.

---

Implement a Repeat Button

A repeat button fires click events at a regular interval while the button is held down, stopping when released. This is implemented via mousedown/mouseup (desktop) and touchstart/touchend (mobile) events with setInterval:

import { ButtonModule, ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button #btn ejs-button
        (mousedown)="onMouseDown()"
        (mouseup)="onMouseUp()"
        (touchstart)="onTouchStart()"
        (touchend)="onTouchEnd()"
        (click)="onClick()">
        Hold Me
      </button>
      <p>Click count: {{ clickCount }}</p>
    </div>
  `
})
export class AppComponent {
  @ViewChild('btn') public btn: ButtonComponent | any;
  private timeout: any;
  clickCount = 0;

  onMouseDown() {
    this.timeout = setInterval(() => { this.clickCount++; }, 200);
  }

  onMouseUp() {
    clearInterval(this.timeout);
  }

  onTouchStart() {
    this.timeout = setInterval(() => { this.clickCount++; }, 200);
  }

  onTouchEnd() {
    clearInterval(this.timeout);
  }

  onClick() {
    this.clickCount++;
  }
}

The interval delay (200ms above) controls how frequently the action fires while the button is held. Adjust to match your UX requirements.

Types and Styles — Syncfusion Angular Button

Table of Contents

• Button Styles (Color Classes)
• Basic HTML Button Types
• Flat Button
• Outline Button
• Round Button
• Toggle Button
• Icons
• Font Icons
• SVG Icons
• Button Size

---

Button Styles (Color Classes)

Apply predefined styles using the cssClass property:

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button cssClass="e-primary">Primary</button>
      <button ejs-button cssClass="e-success">Success</button>
      <button ejs-button cssClass="e-info">Info</button>
      <button ejs-button cssClass="e-warning">Warning</button>
      <button ejs-button cssClass="e-danger">Danger</button>
      <button ejs-button cssClass="e-link">Link</button>
    </div>
  `
})
export class AppComponent { }

Color styles are visual only. For accessibility, ensure the button's text or aria-label communicates intent to screen reader users — do not rely solely on color.

Alternative for primary: Setting [isPrimary]="true" is equivalent to cssClass="e-primary". Prefer cssClass for consistency with other color styles.

---

Basic HTML Button Types

Use the standard HTML type attribute for form buttons:

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <form>
        <button type="submit" ejs-button>Submit</button>
        <button type="reset" ejs-button>Reset</button>
      </form>
    </div>
  `
})
export class AppComponent { }

---

Flat Button

A flat button has no background. Set cssClass to e-flat:

<button ejs-button cssClass="e-flat">Flat</button>

---

Outline Button

An outline button has a border with a transparent background. Set cssClass to e-outline:

<button ejs-button cssClass="e-outline">Outline</button>

---

Round Button

A round button is circular, typically icon-only. Set cssClass to e-round and provide an icon via iconCss. Use [isPrimary]="true" for the filled appearance:

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button cssClass="e-flat">Flat</button>
      <button ejs-button cssClass="e-outline">Outline</button>
      <!-- e-icons is the Syncfusion built-in icon class; e-plus is a custom icon -->
      <button ejs-button cssClass="e-round" iconCss="e-icons e-plus" [isPrimary]="true"></button>
    </div>
  `
})
export class AppComponent { }

---

Toggle Button

A toggle button switches between a normal and active state on each click. The active state is indicated by the e-active CSS class applied to the element.

• Set [isToggle]="true" to enable toggle behavior
• Handle state changes in the click event

import { ButtonModule, ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild, HostListener } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button #togglebtn ejs-button cssClass="e-flat" iconCss="e-icons e-play"
        [isToggle]="true" content="Play"></button>
    </div>
  `
})
export class AppComponent {
  @ViewChild('togglebtn') togglebtn: ButtonComponent | any;

  @HostListener('click', ['togglebtn'])
  btnClick() {
    if (this.togglebtn.element.classList.contains('e-active')) {
      this.togglebtn.content = 'Pause';
      this.togglebtn.iconCss = 'e-icons e-pause';
    } else {
      this.togglebtn.content = 'Play';
      this.togglebtn.iconCss = 'e-icons e-play';
    }
  }
}

---

Icons

Font Icons

Use the iconCss property to specify icon CSS classes. By default, icons appear to the left of text. Use iconPosition to move them right:

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <!-- Icon on the left (default) -->
      <button ejs-button iconCss="e-icons e-play">Previous</button>

      <!-- Icon on the right -->
      <button ejs-button iconCss="e-icons e-pause" iconPosition="Right">Stop</button>
    </div>
  `
})
export class AppComponent { }

iconPosition accepts: "Left" (default) | "Right"

Syncfusion provides built-in icons via the e-icons class. Third-party icon libraries (FontAwesome, Material Icons, etc.) are also supported through iconCss.

SVG Icons

SVG images can be embedded using iconCss with a custom class that sets background-image or inline SVG via CSS:

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  // styleUrls points to CSS defining .e-search-icon with SVG background
  template: `
    <div class="e-section-control">
      <button ejs-button iconCss="e-search-icon"></button>
    </div>
  `
})
export class AppComponent { }

In your stylesheet, define the icon:

.e-search-icon::before {
  content: url('path/to/search.svg');
  height: 16px;
  width: 16px;
}

---

Button Size

Two sizes are available: normal (default) and small.

Set cssClass to e-small to render a smaller button:

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button cssClass="e-small">Small</button>
      <button ejs-button>Normal</button>
    </div>
  `
})
export class AppComponent { }

Combine size with style classes using space-separated values:

<button ejs-button cssClass="e-small e-primary">Small Primary</button>
<button ejs-button cssClass="e-small e-outline">Small Outline</button>

Accessibility — Syncfusion Angular ButtonGroup

Table of Contents

• Compliance Summary
• Keyboard Interaction
• Screen Reader Guidance
• Ensuring Accessibility

---

Compliance Summary

The ButtonGroup component meets the following accessibility standards:

The component follows the WAI-ARIA button interaction pattern.

---

Keyboard Interaction

Keyboard behavior differs based on the ButtonGroup type:

Normal Buttons

Checkbox Type

Radio Type

---

Screen Reader Guidance

Predefined color styles (e-primary, e-success, e-info, e-warning, e-danger) provide visual indication only. Screen readers cannot interpret color meaning, so:

• Always include descriptive text content in button labels (e.g., "Delete" not just a red button)
• Do not rely on color alone to convey the button's action or state
• For icon-only buttons, add an aria-label attribute describing the action

Good practice:

<!-- ✅ Descriptive label + semantic color -->
<button ejs-button cssClass='e-danger'>Delete</button>

<!-- ❌ Color without description is inaccessible -->
<button ejs-button cssClass='e-danger'></button>

For radio/checkbox ButtonGroups, the <label> elements paired with each <input> provide the accessible name automatically — no additional ARIA attributes needed.

---

Ensuring Accessibility

Syncfusion validates ButtonGroup accessibility using:

• [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) — automated compliance scanning
• [axe-core](https://www.npmjs.com/package/axe-core) — runtime accessibility analysis

To verify your ButtonGroup implementation meets accessibility requirements, run either tool against your rendered component in a browser environment.

Getting Started — Syncfusion Angular ButtonGroup

Table of Contents

• Dependencies
• Installation
• Angular Standalone Setup
• CSS Theme Imports
• Basic ButtonGroup
• Vertical Orientation
• Running the Application

---

Dependencies

The ButtonGroup relies on the following packages:

@syncfusion/ej2-angular-buttons
  └── @syncfusion/ej2-angular-base
@syncfusion/ej2-angular-splitbuttons  (required for nesting DropDownButton/SplitButton)
  └── @syncfusion/ej2-splitbuttons
      ├── @syncfusion/ej2-base
      ├── @syncfusion/ej2-popups
      └── @syncfusion/ej2-buttons

---

Installation

Use the Angular CLI ng add command — it installs the package, registers the theme in angular.json, and imports the module automatically:

ng add @syncfusion/ej2-angular-buttons

Supports Angular 21 (standalone by default) and recent Angular versions. For Angular 12–18 (ngcc/legacy), use: npm add @syncfusion/ej2-angular-buttons@32.1.19-ngcc

---

Angular Standalone Setup

In Angular 21, components are standalone by default. Import ButtonModule directly in your component's imports array — no NgModule needed:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class='e-btn-group'>
      <button ejs-button>HTML</button>
      <button ejs-button>CSS</button>
      <button ejs-button>JavaScript</button>
    </div>`
})
export class AppComponent { }

`src/main.ts` — bootstrap the standalone app:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

In Angular 19 and below, files are named app.component.ts / app.component.html. In Angular 20+, the CLI generates app.ts / app.html (no .component. suffix).

---

CSS Theme Imports

Add the following imports to src/styles.css. The order matters — it follows the component dependency chain:

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

When nesting DropDownButton or SplitButton, also add:

@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/material.css';

The Material theme is added automatically when using ng add. You can also use CDN, CRG, SCSS, or Theme Studio.

---

Basic ButtonGroup

The ButtonGroup is a CSS component — wrap ejs-button elements in a div with the .e-btn-group class:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group'>
        <button ejs-button>HTML</button>
        <button ejs-button>CSS</button>
        <button ejs-button>JavaScript</button>
      </div>
    </div>`
})
export class AppComponent { }

Result: Three buttons rendered side by side as a single grouped unit with shared borders.

---

Vertical Orientation

By default the ButtonGroup is horizontal. Add the e-vertical CSS class to the container to stack buttons top-to-bottom:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group e-vertical'>
        <button ejs-button>HTML</button>
        <button ejs-button>CSS</button>
        <button ejs-button>JavaScript</button>
      </div>
    </div>`
})
export class AppComponent { }

e-vertical does not support nesting the SplitButton component inside the group.

---

Running the Application

ng serve

The app runs at http://localhost:4200 by default.

How-To Recipes — Syncfusion Angular ButtonGroup

Table of Contents

• Disable Buttons
• Enable Ripple Effect
• Enable RTL (Right-to-Left)
• Form Submission
• Initialize Using createButtonGroup Utility

---

Disable Buttons

Disable an Individual Button

Add [disabled]="true" to the specific ejs-button element. Other buttons in the group remain interactive:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group'>
        <button ejs-button>HTML</button>
        <button ejs-button [disabled]="true">CSS</button>
        <button ejs-button>JavaScript</button>
      </div>
    </div>`
})
export class AppComponent { }

Disable the Entire ButtonGroup

Apply [disabled]="true" to all ejs-button elements in the group:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group'>
        <button ejs-button [disabled]="true">HTML</button>
        <button ejs-button [disabled]="true">CSS</button>
        <button ejs-button [disabled]="true">JavaScript</button>
      </div>
    </div>`
})
export class AppComponent { }

For radio/checkbox type ButtonGroups, add the disabled attribute directly to the corresponding <input> element, not the label. A disabled input's value will not be submitted on form submit.

---

Enable Ripple Effect

Import the enableRipple function from @syncfusion/ej2-base and call it with true to activate the Material ripple effect on button clicks:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class="e-btn-group">
        <button ejs-button>HTML</button>
        <button ejs-button>CSS</button>
        <button ejs-button>JavaScript</button>
      </div>
    </div>`
})
export class AppComponent { }

Call enableRipple(true) at module level (outside the component class) so it applies globally before the component renders.

---

Enable RTL (Right-to-Left)

Add the e-rtl class to the .e-btn-group container. The layout reverses — buttons render from right to left, suitable for Arabic, Hebrew, and other RTL languages:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group e-rtl'>
        <button ejs-button>HTML</button>
        <button ejs-button>CSS</button>
        <button ejs-button>JavaScript</button>
      </div>
    </div>`
})
export class AppComponent { }

---

Form Submission

Use radio or checkbox type ButtonGroups inside an HTML <form> to capture user selections. On form submit:

• The name attribute groups related inputs together
• The value of the checked input is sent to the server
• Disabled inputs are not submitted

Radio group form example (with "Male" pre-selected via checked):

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <form>
        <div class='e-btn-group'>
          <input type="radio" id="male" name="gender" value="male" checked/>
          <label class="e-btn" for="male">Male</label>
          <input type="radio" id="female" name="gender" value="female"/>
          <label class="e-btn" for="female">Female</label>
          <input type="radio" id="transgender" name="gender" value="transgender"/>
          <label class="e-btn" for="transgender">Transgender</label>
        </div>
        <button class='e-btn e-primary'>Submit</button>
      </form>
    </div>`
})
export class AppComponent { }

Key points:

• All radio inputs in a group share the same name — this is what enforces single-selection and groups the values for form submission
• For checkbox groups, only the checked items' values are submitted
• The submit button uses class='e-btn e-primary' (plain HTML button with Syncfusion CSS classes)

---

Initialize Using createButtonGroup Utility

The createButtonGroup utility function from @syncfusion/ej2-splitbuttons provides a programmatic way to initialize ButtonGroups. It reads existing DOM elements (buttons or inputs) and applies the correct Syncfusion CSS classes automatically.

When to use: Useful for dynamically created markup or when you prefer imperative initialization over declarative templates.

Usage:

createButtonGroup(selector: string, options: { buttons: Array<{ content: string } | null> }): void

• selector — CSS selector string targeting the container element (e.g., '#basic')
• buttons — array of objects with a content string matching each button/input in order
• Pass null for any button to skip it in processing

Full example — initializing normal, checkbox, and radio groups:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { createButtonGroup } from '@syncfusion/ej2-splitbuttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <h5>Normal behavior</h5>
      <div id='basic'>
        <button></button>
        <button></button>
        <button></button>
      </div>
      <h5>Checkbox type behavior</h5>
      <div id='checkbox'>
        <input type="checkbox" id="checkbold" name="font" value="bold"/>
        <input type="checkbox" id="checkitalic" name="font" value="italic"/>
        <input type="checkbox" id="checkundeline" name="font" value="underline"/>
      </div>
      <h5>Radiobutton type behavior</h5>
      <div id='radio'>
        <input type="radio" id="radioleft" name="align" value="left"/>
        <input type="radio" id="radiomiddle" name="align" value="middle"/>
        <input type="radio" id="radioright" name="align" value="right"/>
      </div>
    </div>`
})
export class AppComponent {
  ngOnInit() {
    createButtonGroup('#basic', {
      buttons: [
        { content: 'HTML' },
        { content: 'CSS' },
        { content: 'JavaScript' }
      ]
    });

    createButtonGroup('#checkbox', {
      buttons: [
        { content: 'Bold' },
        { content: 'Italic' },
        { content: 'Underline' }
      ]
    });

    createButtonGroup('#radio', {
      buttons: [
        { content: 'Left' },
        { content: 'Center' },
        { content: 'Right' }
      ]
    });
  }
}

Gotcha: The number of objects in the buttons array must match the number of <button> or <input> elements in the target container. Pass null to skip a specific element without processing it.

Selection — Syncfusion Angular ButtonGroup

Table of Contents

• Single Selection (Radio Type)
• Multiple Selection (Checkbox Type)
• Show Selected State on Initial Render
• Nesting DropDownButton
• Nesting SplitButton

---

Single Selection (Radio Type)

Radio-type ButtonGroup allows only one button to be active at a time — selecting one deselects all others. This mirrors the behavior of native <input type="radio"> elements.

How it works:

• Place <input type="radio"> elements inside the .e-btn-group container
• Each input needs a unique id and a shared name attribute (groups the radio buttons)
• Pair each input with a <label class="e-btn"> whose for attribute matches the input's id
• The label renders as the visible button; the hidden input handles the selection state

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group'>
        <input type="radio" id="radioleft" name="font" value="left"/>
        <label class="e-btn" for="radioleft">Left</label>
        <input type="radio" id="radiomiddle" name="font" value="middle"/>
        <label class="e-btn" for="radiomiddle">Center</label>
        <input type="radio" id="radioright" name="font" value="right"/>
        <label class="e-btn" for="radioright">Right</label>
      </div>
    </div>`
})
export class AppComponent { }

---

Multiple Selection (Checkbox Type)

Checkbox-type ButtonGroup allows multiple buttons to be active simultaneously. This mirrors the behavior of native <input type="checkbox"> elements.

How it works:

• Place <input type="checkbox"> elements inside .e-btn-group
• Each input needs a unique id and a shared name attribute
• Pair each input with a <label class="e-btn"> whose for matches the input's id

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group'>
        <input type="checkbox" id="check_bold" name="align" value="bold"/>
        <label class="e-btn" for="check_bold">Bold</label>
        <input type="checkbox" id="check_italic" name="align" value="italic"/>
        <label class="e-btn" for="check_italic">Italic</label>
        <input type="checkbox" id="check_underline" name="align" value="underline"/>
        <label class="e-btn" for="check_underline">Underline</label>
      </div>
    </div>`
})
export class AppComponent { }

---

Show Selected State on Initial Render

To pre-select a button when the component first renders, add the checked attribute to the corresponding <input> element.

Checkbox example with "Bold" pre-selected:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group'>
        <input type="checkbox" id="checkbold" name="font" value="bold" checked/>
        <label class="e-btn" for="checkbold">Bold</label>
        <input type="checkbox" id="checkitalic" name="font" value="italic"/>
        <label class="e-btn" for="checkitalic">Italic</label>
        <input type="checkbox" id="checkline" name="font" value="underline"/>
        <label class="e-btn" for="checkline">Underline</label>
      </div>
    </div>`
})
export class AppComponent { }

The same checked attribute works on <input type="radio"> for radio-type groups.

---

Nesting DropDownButton

A DropDownButton can be nested inside a ButtonGroup to provide an expandable list of additional options alongside regular buttons.

Additional requirements:

• Import DropDownButtonModule from @syncfusion/ej2-angular-splitbuttons
• Add extra CSS imports for popups and splitbuttons
• Use class='e-btn' (not ejs-button) on plain buttons in this context
• Bind [items] to an ItemModel[] array and set the content attribute

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownButtonModule, ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  imports: [DropDownButtonModule, ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group'>
        <button class='e-btn'>HTML</button>
        <button class='e-btn'>CSS</button>
        <button class='e-btn'>JavaScript</button>
        <button ejs-dropdownbutton [items]='items' content='More'></button>
      </div>
    </div>`
})
export class AppComponent {
  public items: ItemModel[] = [
    { text: 'Learn SQL' },
    { text: 'Learn PHP' },
    { text: 'Learn Bootstrap' }
  ];
}

Extra CSS required in `styles.css`:

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/material.css';

---

Nesting SplitButton

A SplitButton combines a primary action button with a dropdown arrow for secondary actions. Nest it at the end of a ButtonGroup for a contextual action menu.

Additional requirements:

• Import SplitButtonModule from @syncfusion/ej2-angular-splitbuttons
• Same extra CSS as for DropDownButton
• Use <ejs-splitbutton> with content and [items] bindings

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { SplitButtonModule, ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  imports: [SplitButtonModule, ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group'>
        <button class='e-btn'>Cut</button>
        <button class='e-btn'>Copy</button>
        <ejs-splitbutton content="Paste" [items]='items'></ejs-splitbutton>
      </div>
    </div>`
})
export class AppComponent {
  public items: ItemModel[] = [
    { text: 'Paste' },
    { text: 'Paste Text' },
    { text: 'Paste Special' }
  ];
}

SplitButton nesting is not compatible with vertical orientation (e-vertical).

Types and Styles — Syncfusion Angular ButtonGroup

Table of Contents

• Outline ButtonGroup
• Color Styles
• Rounded Corner
• Icon Buttons
• Unsupported Types

---

Outline ButtonGroup

An outline ButtonGroup has transparent background with a visible border. To create one: 1. Add e-outline class to the container div 2. Add cssClass='e-outline' to each ejs-button

Both are required — the container class sets the group border, and the per-button cssClass applies the outline style to individual buttons.

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group e-outline'>
        <button ejs-button cssClass='e-outline'>HTML</button>
        <button ejs-button cssClass='e-outline'>CSS</button>
        <button ejs-button cssClass='e-outline'>JavaScript</button>
      </div>
    </div>`
})
export class AppComponent { }

---

Color Styles

Apply predefined color styles to individual buttons using the cssClass property. Mix and match within the same group:

Example — mixed styles in one group:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group'>
        <button ejs-button cssClass='e-info'>View</button>
        <button ejs-button>Edit</button>
        <button ejs-button cssClass='e-danger'>Delete</button>
      </div>
    </div>`
})
export class AppComponent { }

These styles are visual only. Always include meaningful text labels so users of assistive technologies (screen readers) understand the button's purpose — do not rely on color alone.

---

Rounded Corner

Add the e-round-corner class to the container div to give the group rounded edges on both ends:

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group e-round-corner'>
        <button ejs-button>HTML</button>
        <button ejs-button>CSS</button>
        <button ejs-button>JavaScript</button>
      </div>
    </div>`
})
export class AppComponent { }

The e-round-corner class only needs to be on the container — no per-button class required.

---

Icon Buttons

Use the iconCss property on each ejs-button to add an icon. The value maps to a CSS class that defines the icon via a ::before pseudo-element with a Unicode content value.

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <div class='e-btn-group'>
        <button ejs-button iconCss='e-icons e-left-icon'>Left</button>
        <button ejs-button iconCss='e-icons e-middle-icon'>Right</button>
        <button ejs-button iconCss='e-icons e-right-icon'>Middle</button>
      </div>
    </div>`
})
export class AppComponent { }

Required CSS for custom icons (add to styles.css):

.e-left-icon::before   { content: '\e33a'; }
.e-right-icon::before  { content: '\e34d'; }
.e-middle-icon::before { content: '\e35e'; }

Also include the splitbuttons and popups CSS imports alongside the base imports:

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-splitbuttons/styles/material.css';

---

Unsupported Types

ButtonGroup does not support the flat or round button types. Use the outline pattern (e-outline) or the rounded corner class (e-round-corner) instead for visual variation.

Chip Accessibility

Table of Contents

• Standards Compliance
• WAI-ARIA Attributes
• Keyboard Interaction
• Screen Reader Support
• RTL Support
• Color Contrast
• Ensuring Accessibility

---

Standards Compliance

The Syncfusion Chips component is built to meet industry accessibility standards:

---

WAI-ARIA Attributes

The Chips component follows WAI-ARIA patterns. The following ARIA attributes are automatically applied:

Example: Providing Custom aria-label

Use htmlAttributes to provide an explicit accessible name:

import { Component } from '@angular/core';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  selector: 'app-accessible-chips',
  standalone: true,
  imports: [ChipListModule],
  template: `
    <ejs-chiplist
      id="accessible-chips"
      selection="Multiple"
      [htmlAttributes]="{ 'aria-label': 'Filter by category' }"
    >
      <e-chips>
        <e-chip text="Angular" [htmlAttributes]="{ 'aria-label': 'Angular framework' }"></e-chip>
        <e-chip text="Vue" [htmlAttributes]="{ 'aria-label': 'Vue framework' }"></e-chip>
        <e-chip text="Svelte" [htmlAttributes]="{ 'aria-label': 'Svelte framework' }"></e-chip>
      </e-chips>
    </ejs-chiplist>
  `
})
export class AccessibleChipsComponent {}

---

Keyboard Interaction

The Chips component supports full keyboard navigation following WAI-ARIA keyboard interaction guidelines:

Example: Keyboard-Accessible Deletable Chip List

import { Component } from '@angular/core';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  selector: 'app-keyboard-chips',
  standalone: true,
  imports: [ChipListModule],
  template: `
    <ejs-chiplist id="keyboard-chips" [enableDelete]="true" selection="Multiple">
      <e-chips>
        <e-chip text="JavaScript"></e-chip>
        <e-chip text="TypeScript"></e-chip>
        <e-chip text="Python"></e-chip>
        <e-chip text="Rust"></e-chip>
      </e-chips>
    </ejs-chiplist>
  `
})
export class KeyboardChipsComponent {}

• Keyboard users can navigate chips with arrow keys, select with Enter/Space, and delete with Delete/Backspace.

---

Screen Reader Support

The Chips component works with popular screen readers (NVDA, JAWS, VoiceOver) because:

• The container is marked as role="listbox".
• Each chip has role="option" or role="button" depending on context.
• aria-selected is updated dynamically when a chip is selected.
• aria-disabled is set for disabled chips.
• The created event fires when the component is fully initialized.

Best Practice: Descriptive Labels

Use htmlAttributes to add aria-label to chips that don't have self-describing text:

<e-chip
  avatarText="A"
  text="Andrew"
  [htmlAttributes]="{ 'aria-label': 'Andrew, team member' }"
></e-chip>

---

RTL Support

Enable right-to-left rendering for Arabic, Hebrew, and other RTL languages:

import { Component } from '@angular/core';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  selector: 'app-rtl-chips',
  standalone: true,
  imports: [ChipListModule],
  template: `
    <ejs-chiplist id="rtl-chips" [enableRtl]="true">
      <e-chips>
        <e-chip text="مرحبا"></e-chip>
        <e-chip text="العالم"></e-chip>
        <e-chip text="Angular"></e-chip>
      </e-chips>
    </ejs-chiplist>
  `
})
export class RtlChipsComponent {}

• [enableRtl]="true" — flips the chip layout, icon positions, and text direction.

---

Color Contrast

The Syncfusion themes (Material, Tailwind, Bootstrap, Fluent) are designed to meet WCAG 2.2 color contrast requirements (minimum 4.5:1 ratio for normal text).

When customizing chip colors via CSS, verify contrast ratios using tools such as:

• WebAIM Contrast Checker
• Colour Contrast Analyser

Example of accessible custom selection color:

/* Ensure sufficient contrast on selected chip */
.e-chip-list.e-selection .e-chip.e-active {
  background-color: #1a56db; /* dark blue */
  color: #ffffff;             /* white text — passes AA */
}

---

Ensuring Accessibility

The component's accessibility is validated using:

• accessibility-checker
• axe-core

To validate your implementation:

# Run axe-core in your test suite
npm install axe-core --save-dev

import axe from 'axe-core';

axe.run(document.getElementById('chip-list')).then((results) => {
  if (results.violations.length) {
    console.error('Accessibility violations:', results.violations);
  }
});

You can also open the Syncfusion Chips accessibility sample to evaluate live compliance with accessibility tools.