# post-carousel/4.0.2/src/components/buttonSet/buttonSet.js

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News, version 4.0.2. 38 lines.

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.2/code/src/components/buttonSet/buttonSet.js
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.2/raw/src/components/buttonSet/buttonSet.js
- Modified: 2026-04-24T11:48:54+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/post-carousel/4.0.2/code/src/components/buttonSet/buttonSet.js#L10-L20`.

```javascript
import "./editor.scss";

const ButtonSet = ({ label = "", attributes, attributesKey, setAttributes, columns = 4, items, onChange = false }) => {
	const handleClick = (value) => {
		if (value === attributes) {
			return;
		}
		if (onChange) {
			onChange(value);
		} else {
			setAttributes({ [attributesKey]: value });
		}
	};
	return (
		<div className="sp-smart-post-button-set sp-smart-post-component-mb">
			{label && (
				<div className="sp-smart-post-component-top sp-smart-post-component-title">
					<span>{label}</span>
				</div>
			)}
			<div className={`sp-smart-post-button-set-list sp-col-${columns}`}>
				{items?.map((item, index) => (
					<span
						key={index}
						className={`sp-smart-post-button-set-item${attributes === item.value ? " active" : ""}`}
						value={item.value}
						onClick={() => handleClick(item.value)}
					>
						<span className="sp-item-set-btn">{item.label}</span>
						{item.tooltip && <p>{item.tooltip}</p>}
					</span>
				))}
			</div>
		</div>
	);
};
export default ButtonSet;

```