Filament•5mo ago

badge style issue V3

Hi Everyone, Tables\Columns\TextColumn::make('status')->badge() when I use this in my project like demo, not working coming normal badge style. I need to change anything? I use Enums

10 Replies

Dennis Koch•5mo ago

not working coming normal badge style.

What?

MstrihiOP•5mo ago

I use Enums for invoice status like this case New = 'new'; public function getColor(): string | array | null { return match ($this) { self::New => 'info', public function getIcon(): ?string { return match ($this) { self::New => 'heroicon-m-sparkles', same as Demo. but in the table the badge coming without icons and not correct color. the secreenshot from the Demo and should be like that

MstrihiOP•5mo ago

this what I get in the table

MstrihiOP•5mo ago

Add/ Edit pages showing correct

Dennis Koch•5mo ago

Did you configure info color inside the panel provider?

MstrihiOP•5mo ago

the problem not just the color but the whole badge with icon as well in Demo https://github.com/filamentphp/demo/blob/main/app/Providers/Filament/AdminPanelProvider.php there is no configure for colors

GitHub

demo/app/Providers/Filament/AdminPanelProvider.php at main · filame...

Source code for the demo.filamentphp.com website. Contribute to filamentphp/demo development by creating an account on GitHub.

MstrihiOP•5mo ago

I used BadgeColumn instead and added icons + colors but in documentation there is no information about that. many thanks

                Tables\Columns\BadgeColumn::make('status')
                    ->label('Status')
                    ->colors([
                        'info' => InvoiceStatus::New->value,
                        'gray' => InvoiceStatus::Void->value,
                        'success' => InvoiceStatus::Paid->value,
                        'warning' => InvoiceStatus::NotPaid->value,
                        'danger' => InvoiceStatus::Overdue->value,
                    ])
                    ->icons([
                        'heroicon-o-sparkles' => InvoiceStatus::New->value,
                        'heroicon-m-no-symbol' => InvoiceStatus::Void->value,
                        'heroicon-o-check-circle' => InvoiceStatus::Paid->value,
                        'heroicon-o-exclamation-circle' => InvoiceStatus::NotPaid->value,
                        'heroicon-o-x-circle' => InvoiceStatus::Overdue->value,            
                    ])
                    ->formatStateUsing(fn (string $state): string => InvoiceStatus::from($state)->getLabel()),

                Tables\Columns\BadgeColumn::make('status')
                    ->label('Status')
                    ->colors([
                        'info' => InvoiceStatus::New->value,
                        'gray' => InvoiceStatus::Void->value,
                        'success' => InvoiceStatus::Paid->value,
                        'warning' => InvoiceStatus::NotPaid->value,
                        'danger' => InvoiceStatus::Overdue->value,
                    ])
                    ->icons([
                        'heroicon-o-sparkles' => InvoiceStatus::New->value,
                        'heroicon-m-no-symbol' => InvoiceStatus::Void->value,
                        'heroicon-o-check-circle' => InvoiceStatus::Paid->value,
                        'heroicon-o-exclamation-circle' => InvoiceStatus::NotPaid->value,
                        'heroicon-o-x-circle' => InvoiceStatus::Overdue->value,            
                    ])
                    ->formatStateUsing(fn (string $state): string => InvoiceStatus::from($state)->getLabel()),

Dennis Koch•5mo ago

Check this. Not every feature is in the demo: https://filamentphp.com/docs/3.x/panels/themes#changing-the-colors

Themes - Panel Builder - Filament

MstrihiOP•5mo ago

yes this to defined the theme and colors for the panel. but not for Badge component. but I share my solved code maybe helpful for other people 😁

Dennis Koch•5mo ago

The Badge will reuse the colors defined for Panel or via FilamentColors::register()

Gaming

Programming

badge style issue V3