Filament•2y ago

Text formatting for badges doesn't work

As said in the docs, all formatting options that work for TextColumn should also work for BadgeColumn but for me this doesn't have any effect on the badges. No matter what size or weight I specify, nothing changes. It works for my TextColumn though. My code:

            ->columns([
                Tables\Columns\TextColumn::make('name')
                    ->label(trans('incident_types.name'))
                    ->weight('semibold'),
                Tables\Columns\BadgeColumn::make('color')
                    ->label(trans('incident_types.color'))
                    ->size('lg')
                    ->weight('semibold')
                    ->enum([
                        'red' => trans('incident_types.red'),
                        'yellow' => trans('incident_types.yellow'),
                        'green' => trans('incident_types.green')
                    ])
                ->colors([
                    'danger' => 'red',
                    'warning' => 'yellow',
                    'success' => 'green'
                ]),
            ])

            ->columns([
                Tables\Columns\TextColumn::make('name')
                    ->label(trans('incident_types.name'))
                    ->weight('semibold'),
                Tables\Columns\BadgeColumn::make('color')
                    ->label(trans('incident_types.color'))
                    ->size('lg')
                    ->weight('semibold')
                    ->enum([
                        'red' => trans('incident_types.red'),
                        'yellow' => trans('incident_types.yellow'),
                        'green' => trans('incident_types.green')
                    ])
                ->colors([
                    'danger' => 'red',
                    'warning' => 'yellow',
                    'success' => 'green'
                ]),
            ])

Current Filament-Version: v2.17.42 Thank you!

5 Replies

Dan Harrin•2y ago

sorry, thats not what we meany by formatting the docs should be updated we meant stuff that uses formatStateUsing()

LeandroFerreira•2y ago

Maybe building a theme and editing (@apply font-semibold) the badge class: https://filamentphp.com/docs/2.x/admin/appearance#building-themes

Filament

Appearance - Admin Panel - Filament

The elegant TALL stack admin panel for Laravel artisans.

ProdexOP•2y ago

The main thing here is to just have the badge bigger. I would like use text-lg but when using ->extraAttributes(['class' => 'text-lg']) it gets inserted one div above, so I can't overwrite it. How should I do it? Thank you!

Patrick Boivin•2y ago

Maybe a custom class like badge-lg, and then a little bit of custom CSS:

.badge-lg * {
    @apply text-lg;
}

.badge-lg * {
    @apply text-lg;
}

ProdexOP•2y ago

ah yeah, thank you!

Gaming

Programming

Text formatting for badges doesn't work