Filament•7mo ago

How do you change button order?

I noticed that the button order isn't consistent with create/edit/delete actions. Is there a way to change this? Ideally I'd like to swap the buttons on the delete confirmation modal since we're mainly a Windows shop (primary action on the left).

Solution:

Override the modal footer actions and reverse the array of actions.

Jump to solution

8 Replies

ChesterS•7mo ago

I don't think there a function or something to do it but you can give it a try with css something like

.fi-modal-footer-actions {
  display: flex;
  flex-direction: row-reverse;
}

.fi-modal-footer-actions {
  display: flex;
  flex-direction: row-reverse;
}

or something similar

morty•7mo ago

I don't think that will work. It appears to be using CSS Grid rather than Flexbox, but the real issue is that it would reverse the button order for create/edit too which defeats the purpose of making it consistent.

Solution

awcodes•7mo ago

Override the modal footer actions and reverse the array of actions.

awcodes•7mo ago

->modalFooterActions([ $this->getSubmitAction(), $this->getCancelAction() ]) Something like that.

morty•7mo ago

Is there a way to add CSS classes on an action's submit button? Because it's grid, adding order-first class would solve the issue for me

awcodes•7mo ago

You could create a custom theme and apply any styles you want. If you need to target a specific action you can probably use extraAttributes() to add a class to target a specific action. But that will probably be applied to the button and not the modal. You’ll need to use some specific attribute selectors to target the modal probably. In curator I use this to target its specific modal. [wire:key*="open_curation_panel"] As an example Easiest approach though would be to change the modalFooterActions array.

morty•7mo ago

Ah ha! I got it!

Tables\Actions\DeleteAction::make()->modalSubmitAction(fn (StaticAction $action) => $action->extraAttributes(['class' => 'order-first'])),

Tables\Actions\DeleteAction::make()->modalSubmitAction(fn (StaticAction $action) => $action->extraAttributes(['class' => 'order-first'])),

I couldn't find where to do this?

awcodes•7mo ago

On my phone so I probably didn’t name the methods right. But a good ide should be able to inspect and autocomplete them. Sorry. But yea there’s multiple ways to accomplish the end goal.

Gaming

Programming

How do you change button order?