F
Filament•10mo ago
Abi

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?
No description
6 Replies
Abi
AbiOP•10mo 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
Dushmanta•10mo ago
Abi
AbiOP•10mo 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
Dushmanta•10mo 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
AbiOP•10mo ago
ok
dissto
dissto•10mo 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) {

}),

Did you find this page helpful?