syncfusion-javascript-buttons

# Syncfusion EJ2 JavaScript Buttons Components ## Overview The Syncfusion EJ2 JavaScript Buttons library provides a comprehensive collection of 10 button and toggle components for building interactive user interfaces. Each component is fully documented with TypeScript/JavaScript examples, accessibility guidelines, and common usage patterns. All components support: - **Accessibility:** WCAG 2.2 Level AA, Section 508, ADA compliance - **Themes:** Material 3, Bootstrap 5, Fluent, Tailwind 3, Fabric - **APIs:** Imperative TypeScript/JavaScript with full event support - **Keyboard:** Full keyboard navigation and interaction --- ## Component Overview ### Quick Navigation | Component | Purpose | Package | Files | |-----------|---------|---------|-------| | **Button** | Primary interactive button | ej2-buttons | 6 | | **ButtonGroup** | Grouped button container | ej2-buttons | 6 | | **Chips** | Interactive tag/chip elements | ej2-buttons | 7 | | **DropdownButton** | Button with dropdown menu | ej2-splitbuttons | 8 | | **FAB** | Floating action button | ej2-buttons | 7 | | **ProgressButton** | Button with progress indicator | ej2-splitbuttons | 6 | | **RadioButton** | Single-select radio button | ej2-buttons | 6 | | **SpeedDial** | Expandable floating menu | ej2-buttons | 11 | | **SplitButton** | Button with dropdown menu | ej2-splitbuttons | 6 | | **Switch** | Toggle on/off component | ej2-buttons | 6 | --- ## Button Component **Purpose:** Primary interactive button component for triggering user actions. **Package:** `@syncfusion/ej2-buttons` ### Quick Example ```typescript import { Button } from '@syncfusion/ej2-buttons'; const button: Button = new Button({ cssClass: 'e-primary', click: (args: any): void => console.log('Clicked') }); button.appendTo('#button'); ``` ### Documentation - [button-getting-started.md](./references/button-getting-started.md) - Setup and basics - [button-types-and-styles.md](./references/button-types-and-styles.md) - Style variants - [button-style-and-appearance.md](./references/button-style-and-appearance.md) - Customization - [button-how-to.md](./references/button-how-to.md) - Common patterns - [button-accessibility.md](./references/button-accessibility.md) - Accessibility - [button-api.md](./references/button-api.md) - Complete API --- ## ButtonGroup Component **Purpose:** Container for grouping related buttons with selection modes. **Package:** `@syncfusion/ej2-buttons` ### Quick Example ```html <div class="e-btn-group" data-mode="radio"> <button>Left</button> <button>Center</button> <button>Right</button> </div> ``` ### Documentation - [buttongroup-getting-started.md](./references/buttongroup-getting-started.md) - Setup - [buttongroup-types-and-styles.md](./references/buttongroup-types-and-styles.md) - Styles - [buttongroup-selection-and-nesting.md](./references/buttongroup-selection-and-nesting.md) - Selection - [buttongroup-customization.md](./references/buttongroup-customization.md) - Customization - [buttongroup-how-to.md](./references/buttongroup-how-to.md) - Patterns - [buttongroup-accessibility.md](./references/buttongroup-accessibility.md) - Accessibility --- ## Chips Component **Purpose:** Interactive chip/tag elements with selection, deletion, and drag-and-drop. **Package:** `@syncfusion/ej2-buttons` ### Quick Example ```typescript import { ChipList } from '@syncfusion/ej2-buttons'; const chips: ChipList = new ChipList({ chips: [ { text: 'Angular' }, { text: 'React' } ] }); chips.appendTo('#chips'); ``` ### Documentation - [chips-getting-started.md](./references/chips-getting-started.md) - Setup - [chips-types-and-selection.md](./references/chips-types-and-selection.md) - Selection - [chips-customization.md](./references/chips-customization.md) - Customization - [chips-drag-and-drop.md](./references/chips-drag-and-drop.md) - Drag-drop - [chips-style.md](./references/chips-style.md) - Styling - [chips-api.md](./references/chips-api.md) - API - [chips-accessibility.md](./references/chips-accessibility.md) - Accessibility --- ## DropdownButton Component **Purpose:** Button with dropdown menu for displaying related actions or items. **Package:** `@syncfusion/ej2-splitbuttons` ### Quick Example ```typescript import { DropdownButton } from '@syncfusion/ej2-splitbuttons'; const dropdownBtn: DropdownButton = new DropdownButton({ items: [ { text: 'Item 1', iconCss: 'e-icons e-one' }, { text: 'Item 2', iconCss: 'e-icons e-two' }, { text: 'Item 3', iconCss: 'e-icons e-three' } ], select: (args: MenuEventArgs): void => { console.log('Selected:', args.item.text); } }); dropdownBtn.appendTo('#dropdownbutton'); ``` ### Documentation - [dropdownbutton-getting-started.md](./references/dropdownbutton-getting-started.md) - Setup and basics - [dropdownbutton-popup-items.md](./references/dropdownbutton-popup-items.md) - Popup items - [dropdownbutton-icons-and-layout.md](./references/dropdownbutton-icons-and-layout.md) - Icons - [dropdownbutton-appearance-and-styling.md](./references/dropdownbutton-appearance-and-styling.md) - Styling - [dropdownbutton-events-and-interactivity.md](./references/dropdownbutton-events-and-interactivity.md) - Events - [dropdownbutton-item-template.md](./references/dropdownbutton-item-template.md) - Templates - [dropdownbutton-api.md](./references/dropdownbutton-api.md) - API - [dropdownbutton-accessibility.md](./references/dropdownbutton-accessibility.md) - Accessibility --- ## Floating Action Button (FAB) **Purpose:** Circular button floating above content for primary actions. **Package:** `@syncfusion/ej2-buttons` ### Quick Example ```typescript import { Fab } from '@syncfusion/ej2-buttons'; const fab: Fab = new Fab({ iconCss: 'e-icons e-plus', position: 'BottomRight' }); fab.appendTo('#fab'); ``` ### Documentation - [floating-action-button-getting-started.md](./references/floating-action-button-getting-started.md) - Setup - [floating-action-button-positions.md](./references/floating-action-button-positions.md) - Positions - [floating-action-button-icons.md](./references/floating-action-button-icons.md) - Icons - [floating-action-button-events.md](./references/floating-action-button-events.md) - Events - [floating-action-button-styles.md](./references/floating-action-button-styles.md) - Styling - [floating-action-button-api.md](./references/floating-action-button-api.md) - API - [floating-action-button-accessibility.md](./references/floating-action-button-accessibility.md) - Accessibility --- ## Speed Dial **Purpose:** Expandable floating menu with linear or radial display modes. **Package:** `@syncfusion/ej2-buttons` ### Quick Example ```typescript import { SpeedDial } from '@syncfusion/ej2-buttons'; const speedDial: SpeedDial = new SpeedDial({ iconCss: 'e-icons e-plus', items: [ { text: 'Edit', iconCss: 'e-icons e-edit' }, { text: 'Delete', iconCss: 'e-icons e-delete' } ] }); speedDial.appendTo('#speeddial'); ``` ### Documentation - [speeddial-getting-started.md](./references/speeddial-getting-started.md) - Setup - [speeddial-items.md](./references/speeddial-items.md) - Items - [speeddial-positions.md](./references/speeddial-positions.md) - Positions - [speeddial-display-modes.md](./references/speeddial-display-modes.md) - Modes - [speeddial-events.md](./references/speeddial-events.md) - Events - [speeddial-modal.md](./references/speeddial-modal.md) - Modal - [speeddial-styles.md](./references/speeddial-styles.md) - Styling - [speeddial-template.md](./references/speeddial-template.md) - Templates - [speeddial-radial-menu.md](./references/speeddial-radial-menu.md) - Radial Menu - [speeddial-api.md](./references/speeddial-api.md) - API - [speeddial-accessibility.md](./references/speeddial-accessibility.md) - Accessibility --- ## ProgressButton **Purpose:** Button with progress indicator for async operations. **Package:** `@syncfusion/ej2-splitbuttons` ### Quick Example ```typescript import { ProgressButton } from '@syncfusion/ej2-splitbuttons'; const progressBtn: ProgressButton = new ProgressButton({ enableProgress: true }); progressBtn.appendTo('#progressbutton'); ``` ### Documentation - [progressbutton-getting-started.md](./references/progressbutton-getting-started.md) - Setup - [progressbutton-spinner-and-progress.md](./references/progressbutton-spinner-and-progress.md) - Progress - [progressbutton-events.md](./references/progressbutton-events.md) - Events - [progressbutton-how-to.md](./references/progressbutton-how-to.md) - Patterns - [progressbutton-accessibility.md](./references/progressbutton-accessibility.md) - Accessibility - [progressbutton-api.md](./references/progressbutton-api.md) - API --- ## RadioButton **Purpose:** Single-selection radio button for mutually exclusive choices. **Package:** `@syncfusion/ej2-buttons` ### Quick Example ```typescript import { RadioButton } from '@syncfusion/ej2-buttons'; const radioBtn: RadioButton = new RadioButton({ label: 'Option 1', name: 'group1', value: 'option1' }); radioBtn.appendTo('#radio'); ``` ### Documentation - [radiobutton-getting-started.md](./references/radiobutton-getting-started.md) - Setup - [radiobutton-label-and-size.md](./references/radiobutton-label-and-size.md) - Labels - [radiobutton-features-and-state.md](./references/radiobutton-features-and-state.md) - Features - [radiobutton-how-to.md](./references/radiobutton-how-to.md) - Patterns - [radiobutton-accessibility.md](./references/radiobutton-accessibility.md) - Accessibility - [radiobutton-api.md](./references/radiobutton-api.md) - API --- ## SplitButton **Purpose:** Button with dropdown menu for related actions. **Package:** `@syncfusion/ej2-splitbuttons` ### Quick Example ```typescript import { SplitButton } from '@syncfusion/ej2-splitbuttons'; const splitBtn: SplitButton = new SplitButton({ items: [ { text: 'Item 1', iconCss: 'e-icons e-one' }, { text: 'Item 2', iconCss: 'e-icons e-two' } ] });