Buttons

# Basics

Buttons are displayed on resource pages: index page, form pages (create/edit) and detail page.
They are responsible for basic actions with elements and are components ActionButton .

In the MoonShine admin panel there are many methods that allow you to override the resource as a separate button , and the whole group .

More detailed information about the ActionButton component.

The buttons for creating, viewing, editing, deleting and mass deleting are placed in separate classes, in order to apply all the necessary methods to them and thereby eliminate duplication, since these buttons are also used in HasMany, BelongsToMany, etc.

# Create button

Modification

The modifyCreateButton() method allows you to modify the button for creating a new element. 

use MoonShine\ActionButtons\ActionButton;
 
protected function modifyCreateButton(ActionButton $button): ActionButton
{
    return $button->error();
}
Override

The getCreateButton() method allows you to override the button for creating a new element. 

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Buttons\CreateButton;
 
public function getCreateButton(?string $componentName = null, bool $isAsync = false): ActionButton
{
    return CreateButton::for(
        $this,
        componentName: $componentName,
        isAsync: $isAsync
    );
}

# Detail button

Modification

The modifyDetailButton() method allows you to modify the detail view button of an element. 

use MoonShine\ActionButtons\ActionButton;
 
protected function modifyDetailButton(ActionButton $button): ActionButton
{
    return $button->warning();
}
Override

The getDetailButton() method allows you to override the element's detail view button. 

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Buttons\DetailButton;
 
public function getDetailButton(bool $isAsync = false): ActionButton
{
    return DetailButton::for(
        $this,
        isAsync: $isAsync
    );
}

# Edit button

Modification

The modifyEditButton() method allows you to modify the element's edit button. 

use MoonShine\ActionButtons\ActionButton;
 
protected function modifyEditButton(ActionButton $button): ActionButton
{
    return $button->icon('heroicons.pencil-square');
}
Override

The getEditButton() method allows you to override an element's edit button. 

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Buttons\EditButton;
 
public function getEditButton(?string $componentName = null, bool $isAsync = false): ActionButton
{
    return EditButton::for(
        $this,
        componentName: $componentName,
        isAsync: $isAsync
    );
}

# Delete button

Modification

The modifyDeleteButton() method allows you to modify the button to delete an element. 

use MoonShine\ActionButtons\ActionButton;
 
protected function modifyDeleteButton(ActionButton $button): ActionButton
{
    return $button->icon('heroicons.x-mark');
}
Override

The getDeleteButton() method allows you to override the element's delete button. 

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Buttons\DeleteButton;
 
public function getDeleteButton(
    ?string $componentName = null,
    string $redirectAfterDelete = '',
    bool $isAsync = false
): ActionButton {
    return DeleteButton::for(
        $this,
        componentName: $componentName,
        redirectAfterDelete: $isAsync ? '' : $redirectAfterDelete,
        isAsync: $isAsync
    );
}

# Bulk delete button

Modification

The modifyMassDeleteButton() method allows you to modify the mass delete button. 

use MoonShine\ActionButtons\ActionButton;
 
protected function modifyMassDeleteButton(ActionButton $button): ActionButton
{
    return $button->icon('heroicons.x-mark');
}
Override

The getMassDeleteButton() method allows you to override the mass delete button. 

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Buttons\MassDeleteButton;
 
public function getMassDeleteButton(
    ?string $componentName = null,
    string $redirectAfterDelete = '',
    bool $isAsync = false
): ActionButton {
    return MassDeleteButton::for(
        $this,
        componentName: $componentName,
        redirectAfterDelete: $isAsync ? '' : $redirectAfterDelete,
        isAsync: $isAsync
    );
}

# Export button

Modification

The modifyExportButton() method allows you to modify the export button. 

use MoonShine\ActionButtons\ActionButton;
 
protected function modifyExportButton(ActionButton $button): ActionButton
{
    return $button->secondary();
}
Override

The getExportButton() method allows you to override the export button. 

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Buttons\ExportButton;
 
public function getExportButton(): ActionButton
{
    return ExportButton::for($this, export: $this->export());
}

# Import button

Modification

The modifyImportButton() method allows you to modify the import button. 

use MoonShine\ActionButtons\ActionButton;
 
protected function modifyImportButton(ActionButton $button): ActionButton
{
    return $button->error();
}
Override

The getImportButton() method allows you to override the import button. 

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Buttons\ImportButton;
 
public function getImportButton(): ActionButton
{
    return ImportButton::for($this, import: $this->import());
}

# Filters button

Modification

The modifyFiltersButton() method allows you to modify the filters button. 

use MoonShine\ActionButtons\ActionButton;
 
protected function modifyFiltersButton(ActionButton $button): ActionButton
{
    return $button->error();
}
Override

The getFiltersButton() method allows you to override the filters button. 

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Buttons\FiltersButton;
 
public function getFiltersButton(): ActionButton
{
    return FiltersButton::for($this);
}

# Form buttons

The getFormBuilderButtons() method allows you to add additional buttons into the create or edit form. 

namespace MoonShine\Resources;
 
use MoonShine\ActionButtons\ActionButton; 
use MoonShine\Resources\ModelResource;
 
class PostResource extends ModelResource
{
    //...
 
    public function getFormBuilderButtons(): array 
    {
        return [
            ActionButton::make('Back', fn() => $this->indexPageUrl())->customAttributes(['class' => 'btn-lg'])
        ];
    } 
 
    //...
}

# Buttons on the index page

By default, the model resource index page only has a button to create.
The actions() method allows you to add additional buttons . 

namespace MoonShine\Resources;
 
use MoonShine\ActionButtons\ActionButton; 
use MoonShine\Enums\JsEvent;
use MoonShine\Resources\ModelResource;
use MoonShine\Support\AlpineJs;
 
class PostResource extends ModelResource
{
    //...
 
    public function actions(): array 
    {
        return [
            ActionButton::make('Refresh', '#')
                ->dispatchEvent(AlpineJs::event(JsEvent::TABLE_UPDATED, 'index-table'))
        ];
    } 
 
    //...
}

# Element buttons

The buttons() method allows you to specify additional buttons, which will be displayed in the index table, in the creation and editing forms, as well as on the detailed page, if they are not overridden for pages by the corresponding methods indexButton() , formButtons() and detailButtons() . 

namespace MoonShine\Resources;
 
use MoonShine\ActionButtons\ActionButton; 
use MoonShine\Resources\ModelResource;
 
class PostResource extends ModelResource
{
    //...
 
    public function buttons(): array 
    {
        return [
            ActionButton::make('Link', '/endpoint')
        ];
    } 
 
    //...
}

# Buttons in the index table

To add buttons to the index table, use the indexButtons() method. 

namespace MoonShine\Resources;
 
use MoonShine\ActionButtons\ActionButton; 
use MoonShine\Resources\ModelResource;
 
class PostResource extends ModelResource
{
    //...
 
    public function indexButtons(): array 
    {
        return [
            ActionButton::make(
                'Link',
                fn(Model $item) => '/endpoint?id=' . $item->getKey()
            )
        ];
    } 
 
    //...
}

An example of creating custom buttons for the index table in the section Recipes

For bulk actions with elements, you need to add the bulk() method 

public function indexButtons(): array
{
    return [
        ActionButton::make('Link', '/endpoint')
            ->bulk() 
    ];
}
Group override

If you want to completely change all the item buttons in the index table, then you need to override the getIndexItemButtons() method in the resource. 

namespace MoonShine\Resources;
 
use MoonShine\Resources\ModelResource;
 
class PostResource extends ModelResource
{
    //...
 
    public function getIndexItemButtons(): array 
    {
        return [
            ...$this->getIndexButtons(),
            $this->getDetailButton(
                isAsync: $this->isAsync()
            ),
            $this->getEditButton(
                isAsync: $this->isAsync()
            ),
            $this->getDeleteButton(
                redirectAfterDelete: $this->redirectAfterDelete(),
                isAsync: $this->isAsync()
            ),
            $this->getMassDeleteButton(
                redirectAfterDelete: $this->redirectAfterDelete(),
                isAsync: $this->isAsync()
            ),
        ];
    } 
 
    //...
}

# Buttons on the form page

To add buttons to a page with a form, use the formButtons() method. 

namespace MoonShine\Resources;
 
use MoonShine\ActionButtons\ActionButton; 
use MoonShine\Resources\ModelResource;
 
class PostResource extends ModelResource
{
    //...
 
    public function formButtons(): array 
    {
        return [
            ActionButton::make('Link')->method('updateSomething')
        ];
    } 
 
    //...
}
Group override

If you want to completely change all the buttons on an element on a form page, then you need to override the getFormItemButtons() method in the resource. 

namespace MoonShine\Resources;
 
use MoonShine\Resources\ModelResource;
 
class PostResource extends ModelResource
{
    //...
 
    public function getFormItemButtons(): array
    {
        return [
            ...$this->getFormButtons(),
            $this->getDetailButton(),
            $this->getDeleteButton(
                redirectAfterDelete: $this->redirectAfterDelete(),
                isAsync: false
            ),
        ];
    } 
 
    //...
}

# Buttons on the detail page

To add buttons on a detail page, use the detailButtons() method. 

namespace MoonShine\Resources;
 
use MoonShine\ActionButtons\ActionButton; 
use MoonShine\Resources\ModelResource;
 
class PostResource extends ModelResource
{
    //...
 
    public function detailButtons(): array 
    {
        return [
            ActionButton::make('Link', '/endpoint')
        ];
    } 
 
    //...
}
Group override

If you want to completely change all the element buttons on the detail page, then you need to override the getDetailItemButtons() method in the resource. 

namespace MoonShine\Resources;
 
use MoonShine\Resources\ModelResource;
 
class PostResource extends ModelResource
{
    //...
 
    public function getDetailItemButtons(): array
    {
        return [
            ...$this->getDetailButtons(),
            $this->getEditButton(
                isAsync: $this->isAsync(),
            ),
            $this->getDeleteButton(
                redirectAfterDelete: $this->redirectAfterDelete(),
                isAsync: false
            ),
        ];
    } 
 
    //...
}
Models Resources
Validation rules
Models Resources
Routes