ToolbarGroup

TwebToolbarGroup

{ label, icon*, name*, onClick, attributes*, setAttributes* }

/**
 * @param {string} [label] - Component label.
 * @param {JSX.Element} icon - Component icon.
 * @param {string} name - Attribute name.
 * @param {function} [onClick] - Function called when the button is clicked.
 * @param {object} attributes - Object containing block attributes.
 * @param {function} setAttributes - Function to set new block attribute values.
 */

block.json

"tabsAlign": {
	"type": "string",
	"default": "left"
},

index.js

import {
	TwebSVG,
} from '@tigriweb/components/primitives';

import {
	TwebToolbarGroup,
} from '@tigriweb/components/attributes';

index.js | edit()

<TwebToolbarGroup
	name="tabsAlign"
	label={ __('Align tabs', 'your-theme-name') }
	groupData={ [{
		value: 'left',
		title: __('Align tabs left', 'your-theme-name'),
		icon: <TwebSVG icon="layout-align-left" />,
	}, {
		value: 'center',
		title: __('Align tabs center', 'your-theme-name'),
		icon: <TwebSVG icon="layout-align-middle" />,
	}, {
		value: 'right',
		title: __('Align tabs right', 'your-theme-name'),
		icon: <TwebSVG icon="layout-align-right" />,
	}] }
	{ ...{ attributes, setAttributes } }
/>