agentsclimarketplace

Syncfusion javascript buttons

Skill syncfusion/javascript-ui-controls-skills/skills/syncfusion-javascript-buttons

This repository contains AI Skills of Javascript

Install
npx -y skills add syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-buttons

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Comprehensive Syncfusion EJ2 JavaScript Buttons library with 10 components (Button, ButtonGroup, Chips, DropdownButton, FAB, ProgressButton, RadioButton, SpeedDial, SplitButton, Switch). Includes imperative TypeScript/JavaScript APIs, multiple themes (Material 3, Bootstrap 5, Fluent, Tailwind 3, Fabric), WCAG 2.2 accessibility compliance, and complete documentation with examples and common UI patterns.

SKILL.md

25.1 KB, as published. Nobody here has run it

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

ComponentPurposePackageFiles
ButtonPrimary interactive buttonej2-buttons6
ButtonGroupGrouped button containerej2-buttons6
ChipsInteractive tag/chip elementsej2-buttons7
DropdownButtonButton with dropdown menuej2-splitbuttons8
FABFloating action buttonej2-buttons7
ProgressButtonButton with progress indicatorej2-splitbuttons6
RadioButtonSingle-select radio buttonej2-buttons6
SpeedDialExpandable floating menuej2-buttons11
SplitButtonButton with dropdown menuej2-splitbuttons6
SwitchToggle on/off componentej2-buttons6

Button Component

Purpose: Primary interactive button component for triggering user actions.

Package: @syncfusion/ej2-buttons

Quick Example

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

ButtonGroup Component

Purpose: Container for grouping related buttons with selection modes.

Package: @syncfusion/ej2-buttons

Quick Example

<div class="e-btn-group" data-mode="radio">
  <button>Left</button>
  <button>Center</button>
  <button>Right</button>
</div>

Documentation

Chips Component

Purpose: Interactive chip/tag elements with selection, deletion, and drag-and-drop.

Package: @syncfusion/ej2-buttons

Quick Example

import { ChipList } from '@syncfusion/ej2-buttons';

const chips: ChipList = new ChipList({
  chips: [
    { text: 'Angular' },
    { text: 'React' }
  ]
});
chips.appendTo('#chips');

Documentation

DropdownButton Component

Purpose: Button with dropdown menu for displaying related actions or items.

Package: @syncfusion/ej2-splitbuttons

Quick Example

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

Floating Action Button (FAB)

Purpose: Circular button floating above content for primary actions.

Package: @syncfusion/ej2-buttons

Quick Example

import { Fab } from '@syncfusion/ej2-buttons';

const fab: Fab = new Fab({
  iconCss: 'e-icons e-plus',
  position: 'BottomRight'
});
fab.appendTo('#fab');

Documentation

Speed Dial

Purpose: Expandable floating menu with linear or radial display modes.

Package: @syncfusion/ej2-buttons

Quick Example

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

ProgressButton

Purpose: Button with progress indicator for async operations.

Package: @syncfusion/ej2-splitbuttons

Quick Example

import { ProgressButton } from '@syncfusion/ej2-splitbuttons';

const progressBtn: ProgressButton = new ProgressButton({
  enableProgress: true
});
progressBtn.appendTo('#progressbutton');

Documentation

RadioButton

Purpose: Single-selection radio button for mutually exclusive choices.

Package: @syncfusion/ej2-buttons

Quick Example

import { RadioButton } from '@syncfusion/ej2-buttons';

const radioBtn: RadioButton = new RadioButton({
  label: 'Option 1',
  name: 'group1',
  value: 'option1'
});
radioBtn.appendTo('#radio');

Documentation

SplitButton

Purpose: Button with dropdown menu for related actions.

Package: @syncfusion/ej2-splitbuttons

Quick Example

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' }
  ]
});
splitBtn.appendTo('#splitbutton');

Documentation

Switch Component

Purpose: Toggle on/off control for binary state management in forms and settings.

Package: @syncfusion/ej2-buttons

Quick Example

import { Switch, ChangeEventArgs } from '@syncfusion/ej2-buttons';

const switchComponent: Switch = new Switch({
  checked: false,
  content: 'Enable notifications',
  change: (args: ChangeEventArgs): void => {
    console.log('Switch state:', args.checked ? 'ON' : 'OFF');
  }
});
switchComponent.appendTo('#switch');

Documentation

Common Patterns

Button with Icon and Text

import { Button } from '@syncfusion/ej2-buttons';

const button: Button = new Button({
  cssClass: 'e-primary',
  iconCss: 'e-icons e-send',
  iconPosition: 'Right'
});
button.appendTo('#button');

Handling Click Events

const button: Button = new Button({
  click: (args: any): void => {
    console.log('Button clicked');
  }
});
button.appendTo('#button');

Dynamic Updates

const button: Button = new Button();
button.appendTo('#button');

// Update properties
button.cssClass = 'e-success';
button.refresh();

Group Selection

<!-- Radio selection -->
<div class="e-btn-group" data-mode="radio">
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</div>

<!-- Checkbox selection -->
<div class="e-btn-group" data-mode="checkbox">
  <button>Bold</button>
  <button>Italic</button>
  <button>Underline</button>
</div>

Installation

npm install @syncfusion/ej2-buttons @syncfusion/ej2-splitbuttons
npm audit

Import

import { Button, ButtonGroup, ChipList, Fab, SpeedDial, RadioButton, Switch } from '@syncfusion/ej2-buttons';
import { ProgressButton, SplitButton, DropdownButton } from '@syncfusion/ej2-splitbuttons';

Theme Support

All components support these themes:

  • Material 3 - Modern Material Design
  • Bootstrap 5 - Bootstrap framework
  • Fluent - Microsoft Fluent Design
  • Tailwind 3 - Tailwind CSS
  • Fabric - Microsoft Fabric
<!-- CDN-based theme imports (for quick prototyping / CDN deployments only).
     For production npm-based projects, import from node_modules instead:
     @import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
     @import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css'; -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material3.css" />
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material3.css" />

Keyboard Navigation

All components support full keyboard navigation:

  • Tab: Focus component
  • Enter/Space: Activate button or menu item
  • Escape: Close menus
  • Arrow Keys: Navigate items

Accessibility

All components comply with:

  • WCAG 2.2 Level AA - Web Content Accessibility Guidelines
  • Section 508 - US federal accessibility standards
  • ADA - Americans with Disabilities Act

Features include:

  • Semantic HTML structure
  • ARIA labels and roles
  • Keyboard navigation
  • Screen reader support
  • Focus management
  • High contrast support

Quick Start Example

import { Button, ChipList, Switch } from '@syncfusion/ej2-buttons';
import { SpeedDial, DropdownButton } from '@syncfusion/ej2-buttons';
import { SplitButton } from '@syncfusion/ej2-splitbuttons';

// Create a button
const button: Button = new Button({
  cssClass: 'e-primary',
  click: (): void => console.log('Clicked')
});
button.appendTo('#button');

// Create a switch
const switchComponent: Switch = new Switch({
  checked: false,
  content: 'Enable feature'
});
switchComponent.appendTo('#switch');

// Create a dropdown button
const dropdownBtn: DropdownButton = new DropdownButton({
  items: [
    { text: 'Edit', iconCss: 'e-icons e-edit' },
    { text: 'Delete', iconCss: 'e-icons e-delete' }
  ]
});
dropdownBtn.appendTo('#dropdownbutton');

// Create chips
const chips: ChipList = new ChipList({
  chips: [
    { text: 'Angular' },
    { text: 'React' },
    { text: 'Vue.js' }
  ]
});
chips.appendTo('#chips');

// Create speed dial
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');

Additional Resources

Component Version: 1.0.0
Last Updated: 2024
Package: @syncfusion/ej2-buttons, @syncfusion/ej2-splitbuttons 📄 Read: references/getting-started.md

  • Package dependencies (ej2-buttons, ej2-base)
  • Webpack quickstart project setup
  • CSS theme imports
  • Basic TypeScript rendering example
  • Checked and unchecked states

Label and Size

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

  • Setting label text with the label property
  • Positioning the label before or after the button (labelPosition: 'Before' / 'After')
  • Small size RadioButton using cssClass: 'e-small'
  • Default size RadioButton

How-To Scenarios

📄 Read: references/how-to.md

  • Set the disabled state using disabled: true
  • Display selected label via change event
  • Enable RTL layout using enableRtl: true
  • Use name and value for HTML form submission
  • Customize appearance with semantic CSS classes (e-primary, e-success, e-info, e-warning, e-danger)

Accessibility

📄 Read: references/accessibility.md

  • WCAG 2.2, Section 508, and ADA compliance
  • WAI-ARIA attributes (aria-disabled)
  • Keyboard interaction (Up/Left arrow, Down/Right arrow)
  • Screen reader support and color contrast

API Reference

📄 Read: references/api.md

  • All properties: checked, cssClass, disabled, enableHtmlSanitizer, enablePersistence, enableRtl, htmlAttributes, label, labelPosition, locale, name, value
  • All methods: appendTo, click, dataBind, destroy, focusIn, getRootElement, getSelectedValue, refresh, addEventListener, removeEventListener
  • All events: change (ChangeArgs), created

Quick Start

TypeScript

import { RadioButton } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize RadioButton component
let radiobutton: RadioButton = new RadioButton({ label: 'Option 1', name: 'default' });
radiobutton.appendTo('#element1');

radiobutton = new RadioButton({ label: 'Option 2', name: 'default', checked: true });
radiobutton.appendTo('#element2');

<!-- index.html -->
<input id="element1" type="radio" />
<input id="element2" type="radio" />

TypeScript (module setup)

index.html

<!DOCTYPE html>
<html>
<head>
  <!-- CDN links for quick prototyping only. Use node_modules imports for production. -->
  <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
</head>
<body>
  <input id="radio1" type="radio" />
  <input id="radio2" type="radio" />
  <script src="bundle.js"></script>
</body>
</html>

import { RadioButton } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const rb1: RadioButton = new RadioButton({ label: 'Option 1', name: 'default' });
rb1.appendTo('#radio1');

const rb2: RadioButton = new RadioButton({ label: 'Option 2', name: 'default', checked: true });
rb2.appendTo('#radio2');

Common Patterns

RadioButton group with change event

import { RadioButton, ChangeEventArgs } from '@syncfusion/ej2-buttons';

let rb1: RadioButton = new RadioButton({
  label: 'Option 1',
  name: 'group',
  checked: true,
  change: (args: ChangeEventArgs) => {
    console.log('Selected: ' + (args.event.target as HTMLInputElement).value);
  }
});
rb1.appendTo('#element1');

Small-size RadioButton

import { RadioButton } from '@syncfusion/ej2-buttons';

let rb: RadioButton = new RadioButton({ label: 'Small', name: 'size', cssClass: 'e-small' });
rb.appendTo('#element');

Disabled RadioButton

import { RadioButton } from '@syncfusion/ej2-buttons';

let rb: RadioButton = new RadioButton({ label: 'Disabled Option', name: 'group', disabled: true });
rb.appendTo('#element');

SplitButton

The Syncfusion EJ2 JavaScript SplitButton renders a dual-action button: the primary button triggers a default action, and the secondary arrow button opens a contextual popup menu with additional action items. It supports icons, separators, item/popup templating, RTL, disabled state, keyboard navigation, and full accessibility — all from the ej2-splitbuttons package.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

  • Package dependencies (ej2-splitbuttons, ej2-base, ej2-buttons, ej2-popups)
  • Local script/style setup
  • CDN-based setup
  • Minimal working example (ES5 global namespace)
  • Rendering via appendTo(), items configuration

Icons and Separator

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

  • Adding icons via iconCss property
  • Positioning icons: Left (default) and Top
  • Vertical SplitButton using e-vertical CSS class and cssClass
  • Adding horizontal separators between popup items via separator: true

Popup Items

📄 Read: references/popup-items.md

  • Adding icons to popup action items via iconCss on ItemModel
  • Item templating with beforeItemRender event
  • Popup templating using the target property with a custom HTML element
  • addItems() and removeItems() methods for dynamic item management

How-To Scenarios

📄 Read: references/how-to.md

  • Enable RTL (right-to-left) layout
  • Set disabled state
  • Group popup items using ListView
  • Open a Dialog on popup item click via select event
  • Underline a character in popup item text using beforeItemRender

Accessibility

📄 Read: references/accessibility.md

  • WCAG 2.2, Section 508, ADA compliance
  • WAI-ARIA attributes: role, aria-haspopup, aria-expanded, aria-owns, aria-disabled
  • Keyboard shortcuts (Esc, Enter, Space, Arrow keys, Alt+Arrow)
  • Screen reader support, RTL, color contrast

API Reference

📄 Read: references/api.md

  • All properties: content, items, iconCss, iconPosition, cssClass, disabled, enableRtl, target, itemTemplate, animationSettings, closeActionEvents, createPopupOnClick, popupWidth, enableHtmlSanitizer, enablePersistence, locale
  • All methods: appendTo, toggle, addItems, removeItems, dataBind, refresh, destroy, focusIn, getRootElement
  • All events: click, select, beforeOpen, open, beforeClose, close, beforeItemRender, created

Quick Start

TypeScript

index.html

<!DOCTYPE html>
<html>
<head>
  <!-- CDN links for quick prototyping only. Use node_modules imports for production. -->
  <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
</head>
<body>
  <button id="element">Paste</button>
  <script src="bundle.js"></script>
</body>
</html>

import { SplitButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const items: ItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { text: 'Paste' }
];

const splitBtn: SplitButton = new SplitButton({ items: items });
splitBtn.appendTo('#element');

Common Patterns

SplitButton with icon (left position, default)

import { SplitButton, ItemModel } from '@syncfusion/ej2-splitbuttons';

const items: ItemModel[] = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];

const splitBtn: SplitButton = new SplitButton({
  content: 'Paste',
  iconCss: 'e-icons e-paste',
  items: items
});
splitBtn.appendTo('#element');

SplitButton with click and select event handlers

import { SplitButton, ItemModel, ClickEventArgs, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';

const items: ItemModel[] = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];

const splitBtn: SplitButton = new SplitButton({
  content: 'Paste',
  items: items,
  click: (args: ClickEventArgs): void => {
    console.log('Primary button clicked');
  },
  select: (args: MenuEventArgs): void => {
    console.log('Selected item: ' + args.item.text);
  }
});
splitBtn.appendTo('#element');

Disabled SplitButton

import { SplitButton, ItemModel } from '@syncfusion/ej2-splitbuttons';

const items: ItemModel[] = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];

const splitBtn: SplitButton = new SplitButton({
  content: 'Paste',
  items: items,
  disabled: true
});
splitBtn.appendTo('#element');

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.