# post-carousel/4.0.7/src/components/buttonGroup/buttonGroup.js

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

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.7/code/src/components/buttonGroup/buttonGroup.js
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.7/raw/src/components/buttonGroup/buttonGroup.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.7/code/src/components/buttonGroup/buttonGroup.js#L10-L20`.

```javascript
import { ButtonGroup, Button } from "@wordpress/components";
import "./editor.scss";
import { useDeviceType } from "../../controls/controls";
import Responsive from "../responsive/responsive";

const SpButtonGroup = ({
	attributes,
	attributesKey,
	setAttributes,
	label,
	items,
	border = false,
	flexStyle = false,
	onClick = false,
}) => {
	// Device type
	const deviceType = useDeviceType();

	// Update button group value
	const setButtonGroup = (newValue) => {
		if (attributes?.device) {
			setAttributes({
				[attributesKey]: {
					...attributes.device,
					[deviceType]: newValue,
				},
			});
		} else {
			setAttributes({ [attributesKey]: newValue });
		}
	};

	// Get the active value
	const activeValue = attributes?.device ? attributes.device?.[deviceType] : attributes;

	// Handle button click
	const handleClick = (value) => {
		if (onClick) {
			onClick(value);
		} else {
			setButtonGroup(value);
		}
	};

	return (
		<ButtonGroup
			className={`sp-smart-post-button-group sp-smart-post-component-mb ${
				flexStyle ? "sp-smart-post-d-flex button-style-2" : ""
			}`}
		>
			{label && (
				<div className="sp-smart-post-component-top sp-smart-post-component-title">
					<span>{label}</span>
					{attributes?.device && <Responsive />}
				</div>
			)}
			<div className={`sp-smart-post-button-group-list ${border ? "has-border" : ""}`}>
				{items?.map((item, i) => (
					<Button
						className={activeValue === item.value ? "active" : ""}
						key={i}
						value={item.value}
						onClick={() => handleClick(item.value)}
					>
						<span>{item.label}</span>
						{item.tooltip && <p>{item.tooltip}</p>}
					</Button>
				))}
			</div>
		</ButtonGroup>
	);
};

export default SpButtonGroup;

```