ModelResource

Buttons

Video guide

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 of ActionButton.

In MoonShine, there are many methods that allow you to override either a single button for the resource or an 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.

Create button

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

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

You can also override 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

Detail button

The modifyDetailButton() method allows you to modify or override the button for viewing the details of an item.

 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

The modifyEditButton() method allows you to modify or override the button for editing an item.

 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

Delete button

The modifyDeleteButton() method allows you to modify or override the button for deleting an item.

 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

Mass delete button

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

 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

Filters button

The modifyFiltersButton() method allows you to modify or overwrite the filters 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 page buttons

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

 namespaces
use MoonShine\Support\AlpineJs;
use MoonShine\Support\Enums\JsEvent;
use MoonShine\Support\ListOf;
use MoonShine\UI\Components\ActionButton;
 
protected function topButtons(): ListOf
{
    return parent::topButtons()
        ->add(
            ActionButton::make('Refresh', '#')
                ->dispatchEvent(
                    AlpineJs::event(JsEvent::TABLE_UPDATED, $this->getListComponentName())
                )
        );
}
 namespaces
use MoonShine\Support\AlpineJs;
use MoonShine\Support\Enums\JsEvent;
use MoonShine\Support\ListOf;
use MoonShine\UI\Components\ActionButton;
 
protected function topButtons(): ListOf
{
    return parent::topButtons()
        ->add(
            ActionButton::make('Refresh', '#')
                ->dispatchEvent(
                    AlpineJs::event(JsEvent::TABLE_UPDATED, $this->getListComponentName())
                )
        );
}

resource_buttons_actions resource_buttons_actions_dark

Index table buttons

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

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

resource_buttons_index resource_buttons_index_dark

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

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

resource_buttons_bulk resource_buttons_bulk_dark

Form page buttons

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

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

resource_buttons_form resource_buttons_form_dark

The formBuilderButtons() method allows you to add additional buttons directly in the create or edit form.

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

resource_buttons_form_builder resource_buttons_form_builder

Detail page buttons

To add buttons to the detail view page, use the detailButtons() method.

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

resource_buttons_detail resource_buttons_detail_dark