> For the complete documentation index, see [llms.txt](https://docs.reactium.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.reactium.io/reactium-toolkit/creating-elements/toolbar.md).

# Toolbar Elements

If you have created an element using the ARCLI you will notice that the generated component uses the [Element](/reactium-toolkit/components/element.md) wrapper component:

{% code title="/Reactium Project/src/app/component/Toolkit/Test/index.js" %}

```jsx
import React from 'react';
import { useHookComponent } from 'reactium-core/sdk';

export default () => {
    const { Element } = useHookComponent('RTK');

    return <Element title='Test'>Test Element</Element>;
};
```

{% endcode %}

The Element wrapper component adds the Toolbar component which has a zone included that allows you to add elements to the Toolbar.&#x20;

<div align="center"><img src="/files/-MTMeaMjKaHTCm2m68b9" alt="Toolbar Zone"></div>

## Adding Toolbar Elements

You can add Toolbar elements by registering a component with the [Toolkit SDK](/reactium-toolkit/sdk.md).&#x20;

{% code title="/MyPlugin/reactium-hooks.js" %}

```javascript
import Reactium from 'reactium-core/sdk'; 

Reactium.Plugin.register('MyPlugin').then(() => {

    // Ensure the toolkit plugin is available
    if (!Reactium.Toolkit) return;
    
    Reactium.Toolkit.Toolbar.register('CustomButton', {
        align: Reactium.Toolkit.Toolbar.align.left,
        component: <button>CustomButton</button>,
        order: Reactium.Enums.priority.neutral,
    });
});
```

{% endcode %}

{% hint style="warning" %}
When using the Toolkit SDK to add a Toolbar component, the component you register will persist across all Toolbars. You can control it's persistence by rendering **null** on urls you don't want it to appear on.&#x20;
{% endhint %}

You can temporarily register Toolbar elements within a useEffect:&#x20;

{% code title="/Reactium Project/src/app/component/Toolkit/Test/index.js" %}

```jsx
import React, { useEffect } from 'react';
import Reactium, { useHookComponent } from 'reactium-core/sdk';


const TestToolbarButton = () => <button>Test</button>;


export default () => {
    useEffect(() => {
    
        // Ensure the Toolbar is visible
        Reactium.Toolkit.setFullscreen(false);

        // Register the TestToolbarButton
        Reactium.Toolkit.Toolbar.register('TestToolbarButton', {
            align: Reactium.Toolkit.Toolbar.align.right,
            component: TestToolbarButton,
        });

        // Unregister TestToolbarButton on unmount
        return () => {
            Reactium.Toolkit.Toolbar.unregister('TestToolbarButton');
        };
    }, []);

    return <div>Test Element</div>;
};
```

{% endcode %}

Using the [Element](/reactium-toolkit/components/element.md#properties) wrapper component, you can add temporary Toolbar elements by specifying the **toolbar** property:&#x20;

![](/files/-MTMit0xHGsX9o54K8Dz)

{% code title="/Reactium Project/src/app/component/Toolkit/Test/index.js" %}

```jsx
import React from 'react';
import { useHookComponent } from 'reactium-core/sdk';


const TestToolbarButton = () => <button>Test</button>;


export default () => {
    const { Element } = useHookComponent('RTK');

    return (
        <Element 
            title='Test'
            toolbar={TestToolbarButton}>
            Test Element
        </Element>
    );
};
```

{% endcode %}

## Registry Object

{% tabs %}
{% tab title="Properties" %}

| Property      | Type     | Description                                                      |
| ------------- | -------- | ---------------------------------------------------------------- |
| **align**     | `String` | The horizontal alignment of the component`[left\|right\|center]` |
| **component** | `Node`   | React element to insert                                          |
| **order**     | `Number` | Index used to list the Toolbar components when rendering         |
| {% endtab %}  |          |                                                                  |

{% tab title="Object" %}

```javascript
{
    align: Reactium.Toolkit.Toolbar.align.left,
    component: <button>X</button>,
    order: Reactium.Enums.priority.neutral
}
```

{% endtab %}
{% endtabs %}