Implement and configure the Syncfusion EJ2 JavaScript Buttons components (ProgressButton, RadioButton, and SplitButton). Use this when adding interactive button controls, progress indicators, radio selections, or dual-action menus in a JavaScript or ES5 application. This skill covers component configuration, states, events, templates, accessibility, and common UI patterns.
The Syncfusion EJ2 JavaScript ProgressButton visualizes the progression of an operation, indicating to the user that a background process is running. It supports a background filler UI, spinner customization, content animation, progress events, and programmatic start/stop control.
📄 Read: references/getting-started.md
@syncfusion/ej2-splitbuttons and set up dependenciesnew ProgressButton({...})enableProgress: truespinSettings.position: Left/Right/Top/Bottom/Center)spinSettings.width)spinSettings.template)animationSettings.effect, duration, easing)ProgressEventArgs.step in the begin eventProgressEventArgs.percentstart() and stop() methods📄 Read: references/events.md
begin — fires when progress starts, use to set initial stateprogress — fires at each step interval, use to update UIend — fires when progress completes, use to reset or show successfail — fires when progress is incompletecreated — fires after the component renders📄 Read: references/how-to.md
e-hide-spinner CSS classe-vertical), top (e-progress-top), reversedataBind() to apply property changes immediately📄 Read: references/accessibility.md
aria-label, aria-disabled)Enter / Space to start progress)📄 Read: references/api.md
SpinSettingsModel interface (position, template, width)AnimationSettingsModel interface (effect, duration, easing)ProgressEventArgs interface (percent, step, currentDuration, name)start(), stop(), dataBind(), progressComplete(), destroy()begin, progress, end, fail, createdindex.html
<!DOCTYPE html>
<html>
<head>
<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="progressbtn"></button>
<script src="bundle.js"></script>
</body>
</html>
import { ProgressButton } from '@syncfusion/ej2-splitbuttons';
const progressBtn: ProgressButton = new ProgressButton({
content: 'Spin Left',
enableProgress: true
});
progressBtn.appendTo('#progressbtn');
import { ProgressButton } from '@syncfusion/ej2-splitbuttons';
const progressBtn: ProgressButton = new ProgressButton({
content: 'Download',
enableProgress: true,
duration: 4000,
iconCss: 'e-btn-sb-icon e-download',
cssClass: 'e-hide-spinner',
end: (): void => {
progressBtn.content = 'Download';
progressBtn.iconCss = 'e-btn-sb-icon e-download';
progressBtn.dataBind();
}
});
progressBtn.appendTo('#progressbtn');
progressBtn.element.addEventListener('click', (): void => {
if (progressBtn.content === 'Download') {
progressBtn.content = 'Pause';
progressBtn.iconCss = 'e-btn-sb-icon e-pause';
progressBtn.dataBind();
} else if (progressBtn.content === 'Pause') {
progressBtn.content = 'Resume';
progressBtn.iconCss = 'e-btn-sb-icon e-play';
progressBtn.dataBind();
progressBtn.stop();
} else if (progressBtn.content === 'Resume') {
progressBtn.content = 'Pause';
progressBtn.iconCss = 'e-btn-sb-icon e-pause';
progressBtn.dataBind();
progressBtn.start();
}
});
import { ProgressButton } from '@syncfusion/ej2-splitbuttons';
const uploadBtn: ProgressButton = new ProgressButton({
content: 'Upload',
cssClass: 'e-hide-spinner',
enableProgress: true,
duration: 4000,
begin: (): void => {
uploadBtn.content = 'Uploading...';
uploadBtn.cssClass = 'e-hide-spinner e-info';
uploadBtn.dataBind();
},
end: (): void => {
uploadBtn.content = 'Success';
uploadBtn.cssClass = 'e-hide-spinner e-success';
uploadBtn.dataBind();
setTimeout((): void => {
uploadBtn.content = 'Upload';
uploadBtn.cssClass = 'e-hide-spinner';
uploadBtn.dataBind();
}, 500);
}
});
uploadBtn.appendTo('#progressbtn');
import { ProgressButton } from '@syncfusion/ej2-splitbuttons';
const progressBtn: ProgressButton = new ProgressButton({
content: 'Submit',
spinSettings: { position: 'Right', width: 20 }
});
progressBtn.appendTo('#progressbtn');
The Syncfusion EJ2 JavaScript RadioButton is a graphical UI element that lets a user select exactly one option from a group. It supports checked/unchecked states, label positioning, small size, disabled state, RTL layout, form integration via name/value, custom CSS appearance, full keyboard navigation, and WCAG 2.2 accessibility — all from the @syncfusion/ej2-buttons package.
📄 Read: references/getting-started.md
ej2-buttons, ej2-base)📄 Read: references/label-and-size.md
label propertylabelPosition: 'Before' / 'After')cssClass: 'e-small'📄 Read: references/how-to.md
disabled: truechange eventenableRtl: truename and value for HTML form submissione-primary, e-success, e-info, e-warning, e-danger)📄 Read: references/accessibility.md
aria-disabled)📄 Read: references/api.md
checked, cssClass, disabled, enableHtmlSanitizer, enablePersistence, enableRtl, htmlAttributes, label, labelPosition, locale, name, valueappendTo, click, dataBind, destroy, focusIn, getRootElement, getSelectedValue, refresh, addEventListener, removeEventListenerchange (ChangeArgs), createdimport { 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" />
index.html
<!DOCTYPE html>
<html>
<head>
<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');
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');
import { RadioButton } from '@syncfusion/ej2-buttons';
let rb: RadioButton = new RadioButton({ label: 'Small', name: 'size', cssClass: 'e-small' });
rb.appendTo('#element');
import { RadioButton } from '@syncfusion/ej2-buttons';
let rb: RadioButton = new RadioButton({ label: 'Disabled Option', name: 'group', disabled: true });
rb.appendTo('#element');
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.
📄 Read: references/getting-started.md
ej2-splitbuttons, ej2-base, ej2-buttons, ej2-popups)appendTo(), items configurationiconCss propertyLeft (default) and Tope-vertical CSS class and cssClassseparator: true📄 Read: references/popup-items.md
iconCss on ItemModelbeforeItemRender eventtarget property with a custom HTML elementaddItems() and removeItems() methods for dynamic item management📄 Read: references/how-to.md
select eventbeforeItemRender📄 Read: references/accessibility.md
role, aria-haspopup, aria-expanded, aria-owns, aria-disabled📄 Read: references/api.md
content, items, iconCss, iconPosition, cssClass, disabled, enableRtl, target, itemTemplate, animationSettings, closeActionEvents, createPopupOnClick, popupWidth, enableHtmlSanitizer, enablePersistence, localeappendTo, toggle, addItems, removeItems, dataBind, refresh, destroy, focusIn, getRootElementclick, select, beforeOpen, open, beforeClose, close, beforeItemRender, createdindex.html
<!DOCTYPE html>
<html>
<head>
<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');
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');
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');
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');