Filament•10mo ago

How can I give ToggleButtons custom colors?

ToggleButtons::make('feedback')
    ->label('What kind of ticket would you like to open?')
    ->options(TicketsStatus::all()->pluck('name', 'id'))
    ->colors(TicketsStatus::all()->pluck('ticket_color', 'id'))
    ->grouped()
    ->extraAttributes([
        'style' => 'width: 100%;' // Ensure it takes full width
    ])
    ->columnSpan(6),

ToggleButtons::make('feedback')
    ->label('What kind of ticket would you like to open?')
    ->options(TicketsStatus::all()->pluck('name', 'id'))
    ->colors(TicketsStatus::all()->pluck('ticket_color', 'id'))
    ->grouped()
    ->extraAttributes([
        'style' => 'width: 100%;' // Ensure it takes full width
    ])
    ->columnSpan(6),

TicketsStatus has a name and ticket_color column, but how can I give to each button each respective color? Is that even possible?

6 Replies

Patrick•10mo ago

you can add a class name and style it with css

MatthewOP•10mo ago

How do you mean?

Tieme•10mo ago

The color as you stated ->colors(TicketsStatus::all()->pluck('ticket_color', 'id')) are only when someone selects a toggle. Is that not working our did you mean the colors is not working at all?

MatthewOP•10mo ago

ticket_color is a hex string, created from the ColorPicker form component. The colors are not working at all, in the sense that when you select something, instead of getting the correct color, I get a transparent color. I see a lighttt hue in the background when I click on smth, but again, not the correct colro

awcodes•10mo ago

Maybe something like this:

use Filament\Support\Colors\Color;

->colors(function() {
  return TicketsStatus::all()->mapWithKeys(function($item) {
    return [$item->id => Color::hex($item->ticket_color)];
  })->toArray()
})

use Filament\Support\Colors\Color;

->colors(function() {
  return TicketsStatus::all()->mapWithKeys(function($item) {
    return [$item->id => Color::hex($item->ticket_color)];
  })->toArray()
})

MatthewOP•10mo ago

Wow, will try! Thanks

Gaming

Programming

How can I give ToggleButtons custom colors?