AlignButtons.jsx

import {Button} from "@wordpress/components";
export default function AlignButtons ({label, onChange}) {


	const handleChange =  (newAlignment) => {
		if (onChange) {
			onChange(newAlignment);
		}
	}

	return (
		<div className='fi-field-wrapper'>
			<div className='fi-field-label-wrapper'>
				<span className='fi-field-label'>{label}</span>
			</div>
			<div className='fi-field-buttons-wrapper fi-alignbuttons-wrapper'>
				<Button
					icon="editor-alignleft"
					className="has-dashicons"
					onClick={() => handleChange('left')}
				/>
				<Button
					icon="editor-aligncenter"
					className="has-dashicons"
					onClick={() => handleChange('center')}
				/>
				<Button
					icon="editor-alignright"
					className="has-dashicons"
					onClick={() => handleChange('right')}
				/>
			</div>
		</div>
	);
}