> 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.md).

# Attributes

Custom JavaScript components designed to store and manage Gutenberg block attributes. You can use components in the:

## 1. InspectorControls

<div align="left"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2Fsl1ftJanJBjxxFqGsM5g%2Finspector-controls.jpg?alt=media&amp;token=80b31b23-4edc-433c-81f3-57331baaca68" alt=""><figcaption></figcaption></figure></div>

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

```jsx
import { __ } from '@wordpress/i18n';

import {
	InspectorControls,
} from '@wordpress/block-editor';

import {
	PanelBody,
} from '@wordpress/components';
```

{% endcode %}

{% tabs %}
{% tab title="Settings Tab" %}

<pre class="language-jsx" data-title="index.js | edit()"><code class="lang-jsx"><strong>&#x3C;InspectorControls>
</strong>	&#x3C;PanelBody
		title={ __('Panel Title', 'your-theme-name') }
		initialOpen={ true }
	>
		...
	&#x3C;/PanelBody>
&#x3C;/InspectorControls>
</code></pre>

{% endtab %}

{% tab title="Styles Tab" %}

<pre class="language-jsx" data-title="index.js | edit()"><code class="lang-jsx"><strong>&#x3C;InspectorControls group="styles">
</strong>	&#x3C;PanelBody
		title={ __('Panel Title', 'your-theme-name') }
		initialOpen={ true }
	>
		...
	&#x3C;/PanelBody>
&#x3C;/InspectorControls>
</code></pre>

{% endtab %}
{% endtabs %}

### Controls:

* [Checkbox](/components/attributes/checkbox.md)
* [Color](/components/attributes/color.md)
* [ColorGradient](/components/attributes/colorgradient.md)
* [DateTime](/components/attributes/datetime.md)
* [Icon](/components/attributes/icon.md)
* [Media](/components/attributes/media.md)
* [Number](/components/attributes/number.md)
* [PostType](/components/attributes/posttype.md)
* [PostTypeMultiple](/components/attributes/posttypemultiple.md)
* [Radio](/components/attributes/radio.md)
* [Range](/components/attributes/range.md)
* [Select](/components/attributes/select.md)
* [Taxonomy](/components/attributes/taxonomy.md)
* [TaxonomyMultiple](/components/attributes/taxonomymultiple.md)
* [Text](/components/attributes/text.md)
* [Textarea](/components/attributes/textarea.md)
* [Toggle](/components/attributes/toggle.md)

## 2. BlockControls

<div align="left"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FYPgzhIZTWBxZYMzOQ4Z8%2Ftoolbar-button.jpg?alt=media&amp;token=a9fde9ce-c9bb-4b59-91f8-60abdcf38db0" alt=""><figcaption></figcaption></figure></div>

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

```jsx
import { __ } from '@wordpress/i18n';

import {
	BlockControls,
} from '@wordpress/block-editor';
```

{% endcode %}

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

```jsx
<BlockControls>
...
</BlockControls>
```

{% endcode %}

### Controls:

* [ToolbarButton](/components/attributes/toolbarbutton.md)
* [ToolbarGroup](/components/attributes/toolbargroup.md)