ModelResource

Buttons

Video guide

Basics

Buttons on resource pages are responsible for the main actions with elements and are components of ActionButton.

There are many methods in MoonShine that allow you to override a resource as separate buttons and the entire group.

More detailed information about the ActionButton component.

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

Index page buttons

topLeftButtons and topRightButtons

The topLeftButtons() and topRightButtons() methods in the index page class allow you to add\override buttons above the table.

 namespaces
namespace App\MoonShine\Resources\Post\Pages;
 
use MoonShine\Support\AlpineJs;
use MoonShine\Support\Enums\JsEvent;
use MoonShine\Support\ListOf;
use MoonShine\UI\Components\ActionButton;
use MoonShine\Laravel\Pages\Crud\IndexPage;
 
class PostIndexPage extends IndexPage
{
    // ...
 
    protected function topLeftButtons(): ListOf
    {
        return parent::topLeftButtons()
            ->add(
                ActionButton::make('Refresh', '#')
                    ->dispatchEvent(
                        AlpineJs::event(JsEvent::TABLE_UPDATED, $this->getListComponentName())
                    )
            );
    }
}
 namespaces
namespace App\MoonShine\Resources\Post\Pages;
 
use MoonShine\Support\AlpineJs;
use MoonShine\Support\Enums\JsEvent;
use MoonShine\Support\ListOf;
use MoonShine\UI\Components\ActionButton;
use MoonShine\Laravel\Pages\Crud\IndexPage;
 
class PostIndexPage extends IndexPage
{
    // ...
 
    protected function topLeftButtons(): ListOf
    {
        return parent::topLeftButtons()
            ->add(
                ActionButton::make('Refresh', '#')
                    ->dispatchEvent(
                        AlpineJs::event(JsEvent::TABLE_UPDATED, $this->getListComponentName())
                    )
            );
    }
}

resource_buttons_actions resource_buttons_actions_dark

Modification of the create button

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

 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyCreateButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->error();
}
 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyCreateButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->error();
}

Also, you can redefine the button.

 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
use MoonShine\UI\Components\ActionButton;
 
protected function modifyCreateButton(ActionButtonContract $button): ActionButtonContract
{
    return ActionButton::make('Create');
}
 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
use MoonShine\UI\Components\ActionButton;
 
protected function modifyCreateButton(ActionButtonContract $button): ActionButtonContract
{
    return ActionButton::make('Create');
}

resource_button_create resource_button_create_dark

Modification of the filter button

The modifyFiltersButton() method allows you to modify or override the filter button.

 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyFiltersButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->error();
}
 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyFiltersButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->error();
}

resource_button_filters resource_button_filters_dark

Index table buttons

To add/override buttons in the index table, use the buttons() method in the index page class.

 namespaces
use Illuminate\Database\Eloquent\Model;
use MoonShine\UI\Components\ActionButton;
use MoonShine\Support\ListOf;
 
protected function buttons(): ListOf
{
    return parent::buttons()
        ->prepend(
            ActionButton::make(
                'Link'
                fn(Model $item) => '/endpoint?id=' . $item->getKey()
            )
        );
}
 namespaces
use Illuminate\Database\Eloquent\Model;
use MoonShine\UI\Components\ActionButton;
use MoonShine\Support\ListOf;
 
protected function buttons(): ListOf
{
    return parent::buttons()
        ->prepend(
            ActionButton::make(
                'Link'
                fn(Model $item) => '/endpoint?id=' . $item->getKey()
            )
        );
}

resource_buttons_index resource_buttons_index_dark

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

 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\Support\ListOf;
 
protected function buttons(): ListOf
{
    return parent::buttons()
        ->prepend(
            ActionButton::make('Link', '/endpoint')
                ->bulk()
        );
}
 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\Support\ListOf;
 
protected function buttons(): ListOf
{
    return parent::buttons()
        ->prepend(
            ActionButton::make('Link', '/endpoint')
                ->bulk()
        );
}

resource_buttons_bulk resource_buttons_bulk_dark

Modification of the detailed view button

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

 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyDetailButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->warning();
}
 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyDetailButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->warning();
}

resource_button_detail resource_button_detail_dark

Edit button modification

The modifyEditButton() method allows you to modify or override an element's edit button.

 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyEditButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->icon('pencil-square');
}
 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyEditButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->icon('pencil-square');
}

resource_button_edit resource_button_edit_dark

Modification of the delete button

The modifyDeleteButton() method allows you to modify or override an element's delete button.

 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyDeleteButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->icon('x-mark');
}
 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyDeleteButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->icon('x-mark');
}

resource_button_delete resource_button_delete_dark

Modification of the mass delete button

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

 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyMassDeleteButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->icon('x-mark');
}
 namespaces
use MoonShine\Contracts\UI\ActionButtonContract;
 
protected function modifyMassDeleteButton(ActionButtonContract $button): ActionButtonContract
{
    return $button->icon('x-mark');
}

resource_button_mass_delete resource_button_mass_delete

Form page buttons

To add buttons to a form page, use the buttons() method in the form page class.

 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\Support\ListOf;
 
protected function buttons(): ListOf
{
    return parent::buttons()
        ->add(
            ActionButton::make('Link')->method('updateSomething')
        );
}
 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\Support\ListOf;
 
protected function buttons(): ListOf
{
    return parent::buttons()
        ->add(
            ActionButton::make('Link')->method('updateSomething')
        );
}

resource_buttons_form resource_buttons_form_dark

The formButtons() method allows you to add\override buttons directly to the create or edit form.

 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\Support\ListOf;
 
protected function formButtons(): ListOf
{
    return parent::formButtons()
        ->add(
            ActionButton::make('Back', fn() => $this->getIndexPageUrl())->class('btn-lg')
        );
}
 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\Support\ListOf;
 
protected function formButtons(): ListOf
{
    return parent::formButtons()
        ->add(
            ActionButton::make('Back', fn() => $this->getIndexPageUrl())->class('btn-lg')
        );
}

resource_buttons_form_builder resource_buttons_form_builder

Detail page buttons

To add\override buttons on the detail page, use the buttons() method in the detail page class.

 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\Support\ListOf;
 
protected function buttons(): ListOf
{
    return parent::buttons()
        ->add(ActionButton::make('Link', '/endpoint'));
}
 namespaces
use MoonShine\UI\Components\ActionButton;
use MoonShine\Support\ListOf;
 
protected function buttons(): ListOf
{
    return parent::buttons()
        ->add(ActionButton::make('Link', '/endpoint'));
}

resource_buttons_detail resource_buttons_detail_dark