DEV Community

Cover image for Filament: Add icon to form buttons
Syahril Zulkefli
Syahril Zulkefli

Posted on

1

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.

Image description

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');
    }
}
Enter fullscreen mode Exit fullscreen mode

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');
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay