# Syncfusion Angular Buttons > Comprehensive guide for implementing Syncfusion Angular button components including Button, ButtonGroup, DropDownButton, Floating Action Button (FAB), ProgressButton, RadioButton, Switch, Speed Dial, SplitButtons, and Chips. Use this when implementing and styling these components - covering visual styles (primary, outline, toggle, icon, round, block), grouping, dropdowns with popup items and animations, FAB positioning/scoping, Speed Dial linear/radial action items, progress-enabled buttons, and toggle/radio controls. - Skill: `syncfusion/syncfusion-angular-buttons` (Agent Skill, multi-file: 70 files) - Install (CLI): `npx skillmds@latest add syncfusion/syncfusion-angular-buttons` - Raw SKILL.md: https://api.skillmd.com/api/skills/syncfusion/syncfusion-angular-buttons/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: syncfusion (https://skillmd.com/u/syncfusion) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/syncfusion/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](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](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](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 `` and `` 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](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](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](references/button-api.md) - All properties with types, defaults, and code samples - Methods: `click()`, `focusIn()`, `destroy()` - Events: `created` --- ### Quick Start ```bash ng add @syncfusion/ej2-angular-buttons ``` ```typescript // 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: `

` }) 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 ```html ``` #### Icon Button ```html ``` #### Toggle Button ```typescript // 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'; } } ``` ```html ``` #### Disabled Button ```html ``` #### Block (Full-Width) Button ```html ``` --- ## 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](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](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](references/buttongroup-selection.md) - Single selection (radio type) with `` + `` - Multiple selection (checkbox type) with `` + `` - 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](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](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:** ```bash ng add @syncfusion/ej2-angular-buttons ``` **2. Add CSS to `styles.css`:** ```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:** ```typescript import { Component } from '@angular/core'; import { ButtonModule } from '@syncfusion/ej2-angular-buttons'; @Component({ imports: [ButtonModule], standalone: true, selector: 'app-root', template: `

` }) export class AppComponent { } ``` --- ### Common Patterns #### Vertical ButtonGroup Add `e-vertical` to the container — buttons stack top-to-bottom: ```html

``` > `e-vertical` does **not** support nesting SplitButton. #### Outline Style Add `e-outline` to container and `cssClass='e-outline'` to each button: ```html

``` #### Radio Selection (Single Select) ```html

Left Center Right

``` #### Checkbox Selection (Multi Select) ```html

Bold Italic Underline

` }) export class AppComponent { } ``` --- ### Common Patterns #### Icon-Only FAB (most common) ```typescript import { FabModule } from '@syncfusion/ej2-angular-buttons'; import { Component } from '@angular/core'; @Component({ imports: [FabModule], standalone: true, selector: 'app-root', template: `

` }) export class AppComponent { } ``` #### FAB with Click Handler ```typescript import { FabModule } from '@syncfusion/ej2-angular-buttons'; import { Component } from '@angular/core'; @Component({ imports: [FabModule], standalone: true, selector: 'app-root', template: `

` }) export class AppComponent { onFabClick(): void { alert('FAB clicked!'); } } ``` #### FAB with Custom Style ```typescript import { FabModule } from '@syncfusion/ej2-angular-buttons'; import { Component } from '@angular/core'; @Component({ imports: [FabModule], standalone: true, selector: 'app-root', template: `

` }) 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 ```typescript 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 ```html ``` ```typescript public radialSettings: RadialSettingsModel = { direction: 'AntiClockwise', startAngle: 180, endAngle: 360, offset: '80px' }; ``` #### Modal overlay ```html ``` #### Programmatic show/hide ```typescript @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 | Task | Reference File | |---|---| | Installation & basic setup | 📄 [references/getting-started.md](references/progressbutton-getting-started.md) | | Spinner config & progress animation | 📄 [references/spinner-and-progress.md](references/progressbutton-spinner-and-progress.md) | | How-to recipes (hide spinner, cssClass, events, text/style changes) | 📄 [references/how-to.md](references/progressbutton-how-to.md) | | Accessibility & keyboard interaction | 📄 [references/accessibility.md](references/progressbutton-accessibility.md) | | Full API — properties, methods, events, interfaces | 📄 [references/api.md](references/progressbutton-api.md) | ### Quick Start ```bash # Install the package ng add @syncfusion/ej2-angular-splitbuttons ``` ```typescript // 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: ` ` }) export class AppComponent {} ``` ```css /* 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 ```typescript template: ` ` ``` #### Background filler + animation ```typescript template: ` ` ``` #### Handle lifecycle events ```typescript template: ` ` // 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 ```typescript @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](references/switch-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](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](references/switch-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](references/switch-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](references/switch-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](references/switch-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](references/switch-api.md) - All properties, methods, and events with types and defaults - `BeforeChangeEventArgs` and `ChangeEventArgs` interfaces --- ### Quick Start ```bash ng add @syncfusion/ej2-angular-buttons ``` ```typescript // 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: ` ` }) export class AppComponent { isOn = false; onToggle(args: any): void { console.log('Switch is now:', args.checked); } } ``` ```css /* 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 ```html ``` #### With ON / OFF labels ```html ``` > Labels are not displayed in Material themes. Avoid long custom text. #### Small size ```html ``` #### Disabled ```html ``` #### Two-way binding ```html

State: {{ isEnabled }}

``` #### Prevent state change conditionally ```html ``` ```typescript onBeforeChange(args: BeforeChangeEventArgs): void { // Cancel if condition not met if (!this.canToggle) { args.cancel = true; } } ``` #### Programmatic toggle ```typescript @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](references/radio-button-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](references/radio-button-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](references/radio-button-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](references/radio-button-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](references/radio-button-accessibility.md) - WCAG 2.2, Section 508, ADA compliance - WAI-ARIA attributes - Keyboard navigation shortcuts - Screen reader support #### API Reference 📄 **Read:** [references/api.md](references/radio-button-api.md) - All properties with types, defaults, and usage examples - All methods with signatures - Events and `ChangeArgs` interface --- ### Quick Start ```typescript import { Component } from '@angular/core'; import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons'; @Component({ standalone: true, imports: [RadioButtonModule], selector: 'app-root', template: `

` }) 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 ```typescript template: ` ` onPaymentChange(args: ChangeArgs): void { console.log('Selected value:', args.value); // 'credit' or 'debit' } ``` #### Two-Way Binding with ngModel ```typescript // All buttons share [(ngModel)]="selectedValue" template: `

Selected: {{ selectedPlan }}

` ``` #### Small Size Variant ```typescript ``` #### Disabled RadioButton ```typescript ``` --- ### Key Properties at a Glance | Property | Type | Default | Purpose | |---|---|---|---| | `label` | string | `''` | Caption text next to the button | | `name` | string | `''` | Groups mutually exclusive buttons | | `value` | string | `''` | Form submission value | | `checked` | boolean | `false` | Pre-select the button | | `disabled` | boolean | `false` | Disable interaction | | `cssClass` | string | `''` | Custom CSS; use `'e-small'` for small size | | `labelPosition` | RadioLabelPosition | `'After'` | `'Before'` or `'After'` | | `enableRtl` | boolean | `false` | Right-to-left layout | For the full API, read [`references/api.md`](references/radio-button-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](references/split-button-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:** [refer …(truncated)