Flux UI modal close button not working in fresh Laravel 12 + Livewire project

Question

I just created a fresh Laravel 12 project using the Livewire starter kit and added Flux UI.

Steps I followed:

laravel new my-app
# Selected starter kit:
> livewire

Then I followed the Flux UI documentation for the modal component: https://fluxui.dev/components/modal

Here’s the code I added:

<flux:modal.trigger name="edit-profile">
    <flux:button>Edit profile</flux:button>
</flux:modal.trigger>

<flux:modal name="edit-profile" class="md:w-96">
    ...
</flux:modal>

The modal opens correctly, and it closes if I click outside the modal, but the built-in close button (X) does nothing. I also checked the docs and tried re-generating assets with npm run dev, but the behavior is the same.

Am I missing a configuration step for Flux UI or Livewire?

Edit: Flux modal already has a built-in close button and logic for closing, so I’m not adding a custom one.

The close button needs the name attribute to know which modal to close. Try changing <flux:modal.close /> to <flux:modal.close name="edit-profile" /> — oskratch
– oskratch, Commented Aug 29 at 7:52
Flux modal component already comes with a built-in close button and closing logic. if I add a close button I will have two. — nik04r
– nik04r, Commented Aug 30 at 9:07

Matt Komarnicki · Accepted Answer · 2025-09-01 15:08:40Z

0

Run this command and your problem will be solved.

composer update livewire/livewire livewire/flux

edited Sep 1 at 15:08

Matt Komarnicki

5,4728 gold badges51 silver badges101 bronze badges

answered Sep 1 at 4:19

Ramazan Mayar

1

Sign up to request clarification or add additional context in comments.

2 Comments

Community Sep 1 at 4:25

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Greg Marsden Sep 5 at 11:30

Thanks, this fixed my issue must of been a flux v2.2.5 issue. Updated to v2.3.1 and its working now.

Collectives™ on Stack Overflow

Flux UI modal close button not working in fresh Laravel 12 + Livewire project

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related