This content originally appeared on DEV Community and was authored by Syahril Zulkefli
In the development of admin panels using Filament PHP, enhancing form button aesthetics can significantly improve the user experience. This tutorial provides guidance on modifying button icons and labels for both Create and Edit forms.
Create Form
To customise the Create form buttons, access the CreateUser.php file located within your UserResource/Pages directory. There, you can override the relevant functions to make your desired adjustments. By implementing these changes, you can tailor the buttons to better fit the design and functionality needs of your application.
<?php
namespace App\Filament\Resources\UserResource\Pages;
use App\Filament\Resources\UserResource;
use Filament\Resources\Pages\CreateRecord;
use Filament\Support\Enums\IconPosition;
class CreateUser extends CreateRecord
{
protected static string $resource = UserResource::class;
// Customise the "Create" button
protected function getCreateFormAction(): Action
{
return parent::getCreateFormAction()
->label('Add New User')
->icon('heroicon-o-user-plus')
->iconPosition(IconPosition::Before);
}
// Customise the "Create & Create Another" button
protected function getCreateAnotherFormAction(): Action
{
return parent::getCreateAnotherFormAction()
->label('Save & Create Another')
->icon('heroicon-o-plus-circle')
->iconPosition(IconPosition::Before);
}
// Customise the "Cancel" button
protected function getCancelFormAction(): Action
{
return parent::getCancelFormAction()
->label('Go Back')
->icon('heroicon-o-arrow-left')
->color('gray');
}
}
Edit Form
For the Edit form buttons, you'll need to modify the EditUser.php file in your UserResource/Pages directory:
<?php
namespace App\Filament\Resources\UserResource\Pages;
use App\Filament\Resources\UserResource;
use Filament\Resources\Pages\EditRecord;
use Filament\Support\Enums\IconPosition;
class EditUser extends EditRecord
{
protected static string $resource = UserResource::class;
// Customize the "Save" button
protected function getSaveFormAction(): Action
{
return parent::getSaveFormAction()
->label('Update User')
->icon('heroicon-o-check-circle')
->iconPosition(IconPosition::Before)
->color('success');
}
// Customize the "Cancel" button
protected function getCancelFormAction(): Action
{
return parent::getCancelFormAction()
->label('Go Back')
->icon('heroicon-o-arrow-left')
->color('gray');
}
}
Customising form buttons in Filament PHP is straightforward and can greatly improve your admin panel's usability. By overriding these methods, you can create a more intuitive and visually appealing interface for your users.
Remember to import the necessary classes and ensure your namespace matches your application's structure. The changes will take effect immediately after saving the files.
This content originally appeared on DEV Community and was authored by Syahril Zulkefli
Syahril Zulkefli | Sciencx (2024-10-25T02:13:37+00:00) Filament: Add icon to form buttons. Retrieved from https://www.scien.cx/2024/10/25/filament-add-icon-to-form-buttons/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.