Filament: Add icon to form buttons

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.