Toolbar

Custom buttons can be added to the toolbar using the "customToolbarButtons" array prop. The required properties of each button:

• viewBox—a required property of the button's SVG icon
• d—a required property of the SVG icon
• width—a required property of the SVG icon
• height—a required property of the SVG icon
• title—the text that will be displayed on a button hover
• onClick—the action that will be called after a click with the lightbox's instance as an argument

Here's an example presenting adding of a download button:

<FsLightbox
	customToolbarButtons={[
		{
			viewBox: "0 0 16 16",
			d:"M0 14h16v2h-16v-2z M8 13l5-5h-3v-8h-4v8h-3z",
			width: "16px",
			height: "16px",
			title: "Download",
			onClick: function(instance) {
				var URL = instance.props.sources[instance.stageIndexes.current];
				var a = document.createElement("a");
				a.href = URL;
				a.setAttribute("download", "");
				document.body.appendChild(a);
				a.click();
				document.body.removeChild(a);
			}
		}
	]}
/>

By default, custom buttons will be displayed at the beginning of the toolbar. If you want to change it, write some CSS code:

/* for example, let's reverse the order of all buttons (with the download button added) */
.fslightbox-toolbar-button:nth-child(1) {
	order: 7;
}
.fslightbox-toolbar-button:nth-child(2) {
	order: 6;
}
.fslightbox-toolbar-button:nth-child(3) {
	order: 5;
}
.fslightbox-toolbar-button:nth-child(4) {
	order: 4;
}
.fslightbox-toolbar-button:nth-child(5) {
	order: 3;
}
.fslightbox-toolbar-button:nth-child(6) {
	order: 2;
}
.fslightbox-toolbar-button:nth-child(7) {
	order: 1;
}