# Adding button actions

**In the top of the grid, button actions can be defined. Some buttons are predefined by default, which allows for easy addition via the XML layout.**

## XML layout definition
Filters can be added via the XML layout argument `button_actions`. Each button action requires a reference to an Alpine.js method and a label. 

```xml
<block>
    <argument>
        <argument name="button_actions" xsi:type="array">
            <item name="new" xsi:type="array">
                <item name="method" xsi:type="string">newAction</item>
                <item name="label" xsi:type="string">Add New Page</item>
                <item name="primary" xsi:type="boolean">true</item>
            </item>
        </argument>
    </arguments>
</block>
```

See the [grid reference](/admin-components/grid/reference-grid-arguments) for more details.

## Class-based definition
Instead of defining the button via XML layout, you can also use a PHP class for this. For this, create a new class that implements `Loki\AdminComponents\Ui\ButtonInterface` and pass it as follows:

```xml
<block>
    <arguments>
        <argument name="button_actions" xsi:type="array">
            <item name="custom" xsi:type="object">
                YireoTraining\Example\Grid\ButtonAction\CustomButton
            </item>
        </argument>
    </arguments>
</block>
```

Your custom class could extend from `Loki\AdminComponents\Ui\Button` but this is not required.

## Creating a new item
The Alpine.js method `newAction` simply redirects to a new form page where the item can be created. This URL is determined by an Alpine.js property `newUrl` which can be set via the XML layout:

```xml
<block>
    <argument>
        <argument name="new_url" xsi:type="string">my/example/new</argument>
    </arguments>
</block>
```

By default, the new URL is `*/*/form`.

## Redirecting to any page
In a similar way, the Alpine.js method `redirectAction` redirects a custom page, which can be set through the `url` item of the button definition:

```xml
<block>
    <argument>
        <argument name="button_actions" xsi:type="array">
            <item name="product_overview" xsi:type="array">
                <item name="method" xsi:type="string">redirectAction</item>
                <item name="label" xsi:type="string">Product Overview</item>
                <item name="url" xsi:type="string">catalog/product/index</item>
            </item>
        </argument>
    </arguments>
</block>
```

## Existing Alpine.js `method` options
Each action button refers to an Alpine.js method to be executed. The following actions are already available:

- `newAction`
- `redirectAction`

## Adding a new Alpine.js `method` option
If you are adding a button action with a new method reference, that doesn't exist yet in the Alpine.js grid component, you will need to add it. See the documentation on [LokiComponentExtender](/components/component-extender) to see how to do this.

## Adding subaction buttons
<div class="notice">More docs coming soon</div>