> For the complete documentation index, see [llms.txt](https://tigriweb.gitbook.io/components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tigriweb.gitbook.io/components/attributes/color.md).

# Color

[TwebBlockColorControl](https://github.com/tigriweb/components/blob/master/attributes/TwebBlockColorControl.js)

<div align="left"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FFzfTvl9FgkTX4Unakty7%2Fcolor-button.jpg?alt=media&amp;token=0422e9dc-2eec-4020-92bf-8a4e57f9f82c" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FnuXWTxfDQR80pJw7iZUQ%2Fcolor-button-popover.jpg?alt=media&amp;token=f662297f-51b4-4f09-af43-581ae11f13da" alt=""><figcaption></figcaption></figure></div>

<details>

<summary>{ label, help, name*, onChange, attributes*, setAttributes* }</summary>

```jsx
/**
 * @param {string} [label] - Component label.
 * @param {string} [help] - Component description.
 * @param {string} name - Attribute name.
 * @param {function} [onChange] - Callback called when the value changes.
 * @param {object} attributes - Object containing block attributes.
 * @param {function} setAttributes - Function to set new block attribute values.
 */
```

</details>

{% code title="block.json" overflow="wrap" %}

```json
"testColor": {
	"type": "string",
	"default": ""
}
```

{% endcode %}

{% code title="index.js" overflow="wrap" %}

```jsx
import {
	TwebBlockColorControl,
} from '@tigriweb/components/attributes';
```

{% endcode %}

{% code title="index.js | edit()" %}

```jsx
<TwebBlockColorControl
	label={ __('Color Label', 'your-theme-name') }
	name="testColor"
	{...{ attributes, setAttributes }}
/>
```

{% endcode %}