Changing <x-filament:button> color on click of the button

<x-filament::page>
    <div x-data="{ tab: 'new-employees' }">

        <div class="flex space-x-2 mb-4">
            <x-filament::button color="gray" class="text-white px-4 py-1 rounded"
                x-bind:class="tab === 'new-employees' ? 'bg-green-600' : 'bg-gray-400'" 
                @click="tab = 'new-employees'">
                Neue Mitarbeiter
            </x-filament::button>

            <x-filament::button color="gray" class="text-white px-4 py-1 rounded"
                x-bind:class="tab === 'facility-changes' ? 'bg-green-600' : 'bg-gray-400'"
                @click="tab = 'facility-changes'">
                Einrichtungswechsel
            </x-filament::button>

            <x-filament::button color="gray" class="text-white px-4 py-1 rounded"
                x-bind:class="tab === 'employment-changes' ? 'bg-green-600' : 'bg-gray-400'"
                @click="tab = 'employment-changes'">
                Anstellungstypwechsel
            </x-filament::button>

        </div>

        <div>
            <br>
        </div>

        <div>
            <div x-show="tab === 'new-employees'"> @livewire('new-employee-table') </div>
            <div x-show="tab === 'facility-changes'"> @livewire('facility-change-table') </div>
            <div x-show="tab === 'employment-changes'"> @livewire('employment-change-table') </div>
        </div>

    </div>
</x-filament::page>