Filament•3mo 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•3mo ago

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

XaviOP•3mo 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•3mo ago

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

XaviOP•3mo ago

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

XaviOP•3mo ago

SPOILER_audio-record...

LeandroFerreira•3mo 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')"
...

XaviOP•3mo ago

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

LeandroFerreira•3mo 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 🙂

XaviOP•3mo ago

Yes, it works… thanks!! 😉

Gaming

Programming

Custom field button color