Filament•4mo ago

Change the color of the Submit button on the Table Action Modal

I have a Table Action that triggers a modal for further values to complete the action. Is there a way to change the color of the action buttons on the modal?

6 Replies

Abi•4mo ago

Here is the code for the modal

Tables\Actions\Action::make('Cancel Items')
    ->form([
        Select::make('program')
            ->label('Programs')
            ->helperText('Select the program(s) you want to cancel')
            ->multiple()
            ->preload()

    ])
    ->modalHeading('Cancel Membership Program(s)')
    ->modalSubmitActionLabel('Cancel Items')
    ->modalWidth(MaxWidth::Medium)
    ->action(function ($data) {

    })

Tables\Actions\Action::make('Cancel Items')
    ->form([
        Select::make('program')
            ->label('Programs')
            ->helperText('Select the program(s) you want to cancel')
            ->multiple()
            ->preload()

    ])
    ->modalHeading('Cancel Membership Program(s)')
    ->modalSubmitActionLabel('Cancel Items')
    ->modalWidth(MaxWidth::Medium)
    ->action(function ($data) {

    })

Dushmanta•4mo ago

Add an extraAttribute class and change it in your css https://filamentphp.com/docs/3.x/actions/trigger-button#adding-extra-html-attributes

Trigger button - Actions - Filament

Abi•4mo ago

Thanks, I did try using the color method on the action and that did change the color, but not sure if that is the right approach though.

->color('danger')

->color('danger')

called this method on the Action

Dushmanta•4mo ago

use Filament\Actions\Action;
 
Action::make('edit')
    ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
    ->extraAttributes([
        'class' => 'mx-auto my-8',
    ])

use Filament\Actions\Action;
 
Action::make('edit')
    ->url(fn (): string => route('posts.edit', ['post' => $this->post]))
    ->extraAttributes([
        'class' => 'mx-auto my-8',
    ])

As written here if you're using tailwind you can dirctly write the color in the extra attribute or add a class and write the css for the class in your css file It should work it's in the docs but limited colors

Abi•4mo ago

dissto•4mo ago

@Abishek if you don't want to use custom css you could try the following approach:

Select::make('program')
    ->label('Programs')
    ->helperText('Select the program(s) you want to cancel')
    ->multiple()
    ->preload(),

])
->color('danger') // color for the link / button
->modalHeading('Cancel Membership Program(s)')
->modalSubmitActionLabel('Cancel Items')
->modalWidth(MaxWidth::Medium)
->modalFooterActions(function (Tables\Actions\Action $action) {
return [
    $action->getModalSubmitAction()
        ->color('success'), // color for the submit button
    $action->getModalCancelAction(),
];
})
->action(function ($data) {

}),

Select::make('program')
    ->label('Programs')
    ->helperText('Select the program(s) you want to cancel')
    ->multiple()
    ->preload(),

])
->color('danger') // color for the link / button
->modalHeading('Cancel Membership Program(s)')
->modalSubmitActionLabel('Cancel Items')
->modalWidth(MaxWidth::Medium)
->modalFooterActions(function (Tables\Actions\Action $action) {
return [
    $action->getModalSubmitAction()
        ->color('success'), // color for the submit button
    $action->getModalCancelAction(),
];
})
->action(function ($data) {

}),

Gaming

Programming

Change the color of the Submit button on the Table Action Modal