Filament•2w ago

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>

Thanks!

9 Replies

Lara Zeus•2w ago

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

Xavi•2w ago

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•2w ago

what is isRecording? is it a php thing or js? 🙂 you can add custom classes using alpine js: :class="open ? '' : 'hidden'"

Xavi•2w ago

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

Xavi•2w ago

SPOILER_audio-record...

LeandroFerreira•2w ago

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')"
...

Xavi•2w ago

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

LeandroFerreira•2w ago

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

Xavi•2w ago

Yes, it works… thanks!! 😉

Gaming

Programming

Custom field button color