# 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
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();}
![](http://moonshine-laravel.com/screenshots/resource_button_create.png)
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
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();}
![](http://moonshine-laravel.com/screenshots/resource_button_detail.png)
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
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');}
![](http://moonshine-laravel.com/screenshots/resource_button_edit.png)
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
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');}
![](http://moonshine-laravel.com/screenshots/resource_button_delete.png)
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
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');}
![](http://moonshine-laravel.com/screenshots/resource_button_mass_delete.png)
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
The modifyExportButton()
method allows you to modify the export button.
use MoonShine\ActionButtons\ActionButton; protected function modifyExportButton(ActionButton $button): ActionButton{ return $button->secondary();}
![](http://moonshine-laravel.com/screenshots/resource_button_export.png)
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
The modifyImportButton()
method allows you to modify the import button.
use MoonShine\ActionButtons\ActionButton; protected function modifyImportButton(ActionButton $button): ActionButton{ return $button->error();}
![](http://moonshine-laravel.com/screenshots/resource_button_import.png)
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
The modifyFiltersButton()
method allows you to modify the filters button.
use MoonShine\ActionButtons\ActionButton; protected function modifyFiltersButton(ActionButton $button): ActionButton{ return $button->error();}
![](http://moonshine-laravel.com/screenshots/resource_button_filters.png)
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']) ]; } //...}
![](http://moonshine-laravel.com/screenshots/resource_buttons_form_builder.png)
# 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')) ]; } //...}
![](http://moonshine-laravel.com/screenshots/resource_buttons_actions.png)
# 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() ) ]; } //...}
![](http://moonshine-laravel.com/screenshots/resource_buttons_index.png)
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() ];}
![](http://moonshine-laravel.com/screenshots/resource_buttons_bulk.png)
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') ]; } //...}
![](http://moonshine-laravel.com/screenshots/resource_buttons_form.png)
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') ]; } //...}
![](http://moonshine-laravel.com/screenshots/resource_buttons_detail.png)
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 ), ]; } //...}