syncfusion-angular-buttons

What this skill does

# 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 `<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](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: `
    <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
```html
<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
```html
<button ejs-button iconCss="e-icons e-save">Save</button>
<button ejs-button iconCss="e-icons e-delete" iconPosition="Right">Delete</button>
```

#### 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
<button #togglebtn ejs-button cssClass="e-flat" [isToggle]="true" content="Play"></button>
```

#### Disabled Button
```html
<button ejs-button [disabled]="true">Disabled</button>
```

#### Block (Full-Width) Button
```html
<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](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 `<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](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: `
    <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:
```html
<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:
```html
<div class='e-btn-group e-outline'>
  <button ejs-button c