Custom field button color

I create a custom form field to record voice. How to change <x-filament::button> color when i click on it. This is my button code:

<div>
            <x-filament::button
                type="button"
                x-on:click="isRecording ? stopRecording() : startRecording()"
                x-text="isRecording ? 'Detener grabación' : 'Iniciar grabación'"
            ></x-filament::button>
        </div>

<div>
            <x-filament::button
                type="button"
                x-on:click="isRecording ? stopRecording() : startRecording()"
                x-text="isRecording ? 'Detener grabación' : 'Iniciar grabación'"
            ></x-filament::button>
        </div>

<div>
            <x-filament::button
                type="button"
                x-on:click="isRecording ? stopRecording() : startRecording()"
                x-text="isRecording ? 'Detener grabación' : 'Iniciar grabación'"
            ></x-filament::button>
        </div>

<div>
            <x-filament::button
                type="button"
                x-on:click="isRecording ? stopRecording() : startRecording()"
                x-text="isRecording ? 'Detener grabación' : 'Iniciar grabación'"
            ></x-filament::button>
        </div>

Thanks!

Lara Zeus•10/14/24, 12:11 PM

something like this:
:color="isRecording ? 'primary' : 'secondary'":color="isRecording ? 'primary' : 'secondary'"

XaviOP•10/14/24, 1:43 PM

Thanks @Lara Zeus, but it doesn't works. It throws Undefined constant "isRecording" error when i add color condition (isRecording works fine on "x-on:click and x-text")

Lara Zeus•10/14/24, 1:44 PM

what is isRecordingisRecording? is it a php thing or js?

Lara Zeus•10/14/24, 1:45 PM

you can add custom classes using alpine js:
:class="open ? '' : 'hidden'":class="open ? '' : 'hidden'"

XaviOP•10/14/24, 1:53 PM

isRecording its a js variable. I share all custom field here

XaviOP•10/14/24, 1:53 PM

SPOILER_audio-recorder.php4.8KB

XXavi isRecording its a js variable. I share all custom field here

LeandroFerreira•10/14/24, 2:07 PM

maybe

x-data="{
...
buttonStyle(color) {
  return `--c-400:var(--${color}-400);--c-500:var(--${color}-500);--c-600:var(--${color}-600)`;
}

x-data="{
...
buttonStyle(color) {
  return `--c-400:var(--${color}-400);--c-500:var(--${color}-500);--c-600:var(--${color}-600)`;
}

<x-filament::button
type="button"
x-bind:style="buttonStyle(isRecording ? 'danger' : 'success')"
...

<x-filament::button
type="button"
x-bind:style="buttonStyle(isRecording ? 'danger' : 'success')"
...

XaviOP•10/14/24, 2:11 PM

@Leandro Ferreira it works!!! I don't understand the code but it works

XXavi @Leandro Ferreira it works!!! I don't understand the code but it works 😅

LeandroFerreira•10/14/24, 2:15 PM

These CSS variables define the button colors. I set them based on the isRecordingisRecording value..
Maybe this can be better, but I think this works

XaviOP•10/14/24, 3:33 PM

Yes, it works… thanks!!