Aware Controls | JavaScript (ES5) Split Button Demos

The Split Button control features both primary and secondary buttons. The primary button is used to trigger the default action, while the secondary button toggles contextual overlays to display a list of action items. Additionally, it can accommodate both text and images.

Default Behavior

Demonstrates the default behavior of the Split Button control.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ text: "Save to Cloud", iconCss: "fa-regular fa-cloud" },
	{ text: "Share", iconCss: "fa-regular fa-share" }
];

new ac.buttons.SplitButton({ items: items, content: "Save" }, "#cntlSplitButton");

<button id="cntlSplitButton"></button>

Icon and Text

Demonstrates a split button using both an icon and text in the primary button.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ text: "Save to Cloud", iconCss: "fa-regular fa-cloud" },
	{ text: "Share", iconCss: "fa-regular fa-share" }
];

new ac.buttons.SplitButton({ items: items, content: "Save", iconCss: "fa-regular fa-floppy-disk" }, "#cntlSplitButton");

<button id="cntlSplitButton"></button>

Separator and URLs

Demonstrates how a separator or a URL can be specified on a secondary item.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ separator: true },
	{ text: "Open OneDrive", iconCss: "fa-regular fa-cloud", url: "https://onedrive.live.com/", urlTarget: "_blank" }
];

new ac.buttons.SplitButton({ items: items, content: "Save" }, "#cntlSplitButton");

<button id="cntlSplitButton"></button>

Icon Only

Demonstrates a split button using only an icon in the primary button.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ text: "Save to Cloud", iconCss: "fa-regular fa-cloud" },
	{ text: "Share", iconCss: "fa-regular fa-share" }
];

new ac.buttons.SplitButton({ items: items, iconCss: "fa-regular fa-floppy-disk" }, "#cntlSplitButton");

Disable Items

Demonstrates disabling items using the item collection.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ text: "Save to Cloud", iconCss: "fa-regular fa-cloud", disabled: true },
	{ text: "Share", iconCss: "fa-regular fa-share", disabled: true }
];

new ac.buttons.SplitButton({ items: items, content: "Save" }, "#cntlSplitButton");

<button id="cntlSplitButton"></button>

Disable Items Using Event

Demonstrates disabling items using beforeItemRender event.

const items = [
	{ text: "Save", iconCss: "fa-regular fa-floppy-disk" },
	{ text: "Save As", iconCss: "fa-regular fa-floppy-disk-pen" },
	{ text: "Save to Cloud", iconCss: "fa-regular fa-cloud" },
	{ text: "Share", iconCss: "fa-regular fa-share" }
];

new ac.buttons.SplitButton(
	{
		items: items,
		content: "Save",
		beforeItemRender: (args) => {
			if (args.item.text === "Share" || args.item.text === "Save to Cloud") {
				args.element.classList.add("a-disabled");
			}
		}
	},
	"#cntlSplitButton"
);

<button id="cntlSplitButton"></button>