Modal submit action button is white text on white background - I can't figure out how to change that

I may have done something wrong but I haven't yet customized any CSS in this application - I can't figure out why my modal button is showing this way.

This is the code:

Action::make('scan-item')
  ->label('Scan Items')
  ->modalContent(fn(Order $order) => view('livewire.scanning.bar-code-scanner-wrapper', ['order' => $order]))
  ->action(function (Order $record): void {})
  ->modalWidth('Screen')
  ->modalSubmitActionLabel('Link item to inventory')
  ->modalSubmitAction(Action::make('submit')
    ->button()
    ->label('Foo Bar bam')
    ->color('red')
  )
  ->slideOver()


I know that using modalSubmitAction is overriding my modalSubmitActionLabel, I've just been trying several different things. I also know that I can use css to fix the button, but I can't help but think I've just done something wrong in my setup.

I'm attaching screenshots of the button (one normal, one after selecting all text)
image.png
image.png
Solution
If you’re not in a panel then you will need to follow the forms installation instructions to setup up tailwind correctly and load the appropriate filament directives in you layout.
Was this page helpful?