Models Resources

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();
}

resource_button_create resource_button_create_dark

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();
}

resource_button_detail resource_button_detail_dark

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');
}

resource_button_edit resource_button_edit_dark

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');
}

resource_button_delete resource_button_delete_dark

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');
}

resource_button_mass_delete resource_button_mass_delete_dark

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();
}

resource_button_export resource_button_export_dark

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();
}

resource_button_import resource_button_import_dark

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();
}

resource_button_filters resource_button_filters_dark

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'])
        ];
    }
 
    //...
}

resource_buttons_form_builder resource_buttons_form_builder_dark

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'))
        ];
    }
 
    //...
}

resource_buttons_actions resource_buttons_actions_dark

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()
            )
        ];
    }
 
    //...
}

resource_buttons_index resource_buttons_index_dark

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()
    ];
}

resource_buttons_bulk resource_buttons_bulk_dark

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')
        ];
    }
 
    //...
}

resource_buttons_form resource_buttons_form_dark

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')
        ];
    }
 
    //...
}

resource_buttons_detail resource_buttons_detail_dark

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
            ),
        ];
    }
 
    //...
}