Filament•16mo 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

12 Replies

ChesterS•16mo 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

mortyOP•16mo 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•16mo ago

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

awcodes•16mo ago

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

mortyOP•16mo 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•16mo 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.

mortyOP•16mo 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•16mo 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.

mortyOP•4w ago

Sorry I'm just coming back to this in my project. I didn't like the extraAttributes solution. I tried the solution you recommended and while it works to re-arrange the buttons, it restyles it for some reason and I can't figure out why.

Actions\DeleteAction::configureUsing(function (Actions\DeleteAction $action): void {
    $action->modalFooterActions([
        $action->getModalSubmitAction(),
        $action->getModalCancelAction(),
    ]);
});

Actions\DeleteAction::configureUsing(function (Actions\DeleteAction $action): void {
    $action->modalFooterActions([
        $action->getModalSubmitAction(),
        $action->getModalCancelAction(),
    ]);
});

toeknee•4w ago

It will be loosing the parent action, I did this recently with

    protected function getFormActions(): array
    {
        return array_reverse(parent::getFormActions());
    }

    protected function getFormActions(): array
    {
        return array_reverse(parent::getFormActions());
    }

In a modal, so basis should still apply.

mortyOP•4w ago

Where do you override this?

toeknee•4w ago

Form actions would be in the edit page where the fork actions are defined

Gaming

Programming

How do you change button order?

Did you find this page helpful?