Calling modal from <a> tag

[scenic aspen]

Is it possible to call a modal from an <a> tag?

This is the snippet of my code

@else
{{ $section->label }}
  <a href="#" 
      wire:click.prevent="editSection('{{ $section->id }}')"
      class="ml-2 text-blue-500 font-light border border-blue-800 rounded px-1.5 py-0.5 hover:bg-            blue-800 hover:text-white transition-colors duration-300">
    Edit
  </a>
@endif

[thorn violet]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[solid jasper]

Please don’t do this. Links and buttons are different for a reason. You can still use a button and make it look like a link.

[scenic aspen]

Sure

I'll change it to button

[solid jasper]

You can either use an action or filament’s button component if you need more control. https://filamentphp.com/docs/3.x/support/blade-components/button

[scenic aspen]

What do I do with openNewUserModal?

[solid jasper]

That’s why I recommend using an action, the modal stuff is built in.

[scenic aspen]

like similar to saveAction, deleteAction etc ?

[solid jasper]

https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component

https://filamentphp.com/docs/3.x/actions/modals

[scenic aspen]

Is it possible to update the ui ?

ahh nvm the only way i can update the Ui is through the function itself

[solid jasper]

You can always change the styling through css.

[scenic aspen]

there is not function to let me style or use class here

    public function editAction(): Action
    {
        return Action::make('Edit')
            ->requiresConfirmation()

            ->action(function (array $arguments) {
               dd($arguments);

            });
    }
}

Where should I do it?

[solid jasper]

The actions have css classes that you can use to target them in your stylesheet and change them.

[scenic aspen]

like the theme.css ?

[solid jasper]

If you need to target a specific one, iirc correctly, you can use ->extraAttribute([‘class’ => ‘my-btn’]) then target .my-btn in the stylesheet.

Yes, like theme.css

It’s still all just html and css. 🙂

[scenic aspen]

Yeah,, I was expecting to just use the extraAttribute function only

[solid jasper]

Well, technically you can as long as that file is part of the tailwind config content so it gets scanned.

[scenic aspen]

Weird.. nothing works using extraAttribute

Ahh

[solid jasper]

Attributes plural. Sorry

[scenic aspen]

do I need to add this to Tailwind.config ? like the GroupSetting.php?

:/ wasn't able to get it to work

[solid jasper]

Or at least the path to the directory where it is. But yes. If tailwind doesn’t know to scan those files it won’t include those classes.

[scenic aspen]

Yeah added this just to make sure.

[solid jasper]

I have had issues in the past though with it scanning php class files. So, in that case just use a custom class name and target it in the css file and use tailwind’s @apply rule.

[scenic aspen]

Yeah.. I guess . Thanks this will definitely solve the problem. Got no choice I guess..

[solid jasper]

Did you restart the dev server after adding it

Or run npm run build?

[scenic aspen]

No

Just restarted it now but still doenst work

[solid jasper]

Any time you change the TW config you have to either restart or rebuild.

[scenic aspen]

Okay noted on that

[solid jasper]

Surprised it’s not working though. Sorry.