Filament•4mo ago

How to set custom badge color based on color picker.

How to set custom badge color based on color picker or filament-tailwind-color-picker. Maybe I have to use: ViewColumn with custom view ?? How to setup this ?

4 Replies

Tieme•4mo ago

Where is the badge?

SebboRR•4mo ago

In table:

   Tables\Columns\TextColumn::make('crm_level.name')
                    ->searchable()
                    ->sortable()
                    ->badge()
                    ->color(fn (Company $record): string => match ($record->crm_level->id) {
                        1 => 'success',
                        2 => 'warning',
                        3 => 'gray',
                        default => 'gray',
                    })

   Tables\Columns\TextColumn::make('crm_level.name')
                    ->searchable()
                    ->sortable()
                    ->badge()
                    ->color(fn (Company $record): string => match ($record->crm_level->id) {
                        1 => 'success',
                        2 => 'warning',
                        3 => 'gray',
                        default => 'gray',
                    })

I want to have custom color based on $record->crm_level->color_picker Color is in crm_level table in color_picker column

Tieme•4mo ago

Try

use Filament\Support\Colors;

 Tables\Columns\TextColumn::make('crm_level.name')
    ->searchable()
    ->sortable()
    ->badge()
    ->color(fn (Company $record) => Color::hex($record->crm_level->color_picker))

use Filament\Support\Colors;

 Tables\Columns\TextColumn::make('crm_level.name')
    ->searchable()
    ->sortable()
    ->badge()
    ->color(fn (Company $record) => Color::hex($record->crm_level->color_picker))

SebboRR•4mo ago

Thank you for your answer, but the function ->color() seems to only accept arguments: 'primary', 'success' , etc... . I probably need to write my own template for bage. Ok i definied colors from tailwind default color palette in boot():

        FilamentColor::register([
            'gray' => Color::Gray,
            'zinc' => Color::Zinc,
            'neutral' => Color::Neutral,
            'stone' => Color::Stone,
            'red' => Color::Red,
            'orange' => Color::Orange,
            'amber' => Color::Amber,
            'yellow' => Color::Yellow,
            'lime' => Color::Lime,
            'green' => Color::Green,
            'emerald' => Color::Emerald,
            'teal' => Color::Teal,
            'cyan' => Color::Cyan,
            'sky' => Color::Sky,
            'blue' => Color::Blue,
            'indigo' => Color::Indigo,
            'violet' => Color::Violet,
            'purple' => Color::Purple,
            'fuchsia' => Color::Fuchsia,
            'pink' => Color::Pink,
            'rose' => Color::Rose,
        ]);

        FilamentColor::register([
            'gray' => Color::Gray,
            'zinc' => Color::Zinc,
            'neutral' => Color::Neutral,
            'stone' => Color::Stone,
            'red' => Color::Red,
            'orange' => Color::Orange,
            'amber' => Color::Amber,
            'yellow' => Color::Yellow,
            'lime' => Color::Lime,
            'green' => Color::Green,
            'emerald' => Color::Emerald,
            'teal' => Color::Teal,
            'cyan' => Color::Cyan,
            'sky' => Color::Sky,
            'blue' => Color::Blue,
            'indigo' => Color::Indigo,
            'violet' => Color::Violet,
            'purple' => Color::Purple,
            'fuchsia' => Color::Fuchsia,
            'pink' => Color::Pink,
            'rose' => Color::Rose,
        ]);

Then i can use it in badge color()

Gaming

Programming

How to set custom badge color based on color picker.