Badge column
Badge columns render a colored badge with the cell's contents:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->enum([
'draft' => 'Draft',
'reviewing' => 'Reviewing',
'published' => 'Published',
])
Customizing the color
Badges may have a color. It may be either primary
, secondary
, success
, warning
or danger
:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->colors([
'primary',
'secondary' => 'draft',
'warning' => 'reviewing',
'success' => 'published',
'danger' => 'rejected',
])
You may instead activate a color using a callback, accepting the cell's $state
:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->colors([
'primary',
'secondary' => static fn ($state): bool => $state === 'draft',
'warning' => static fn ($state): bool => $state === 'reviewing',
'success' => static fn ($state): bool => $state === 'published',
'danger' => static fn ($state): bool => $state === 'rejected',
])
Or dynamically calculate the color based on the $record
and / or $state
:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->color(static function ($state): string {
if ($state === 'published') {
return 'success';
}
return 'secondary';
})
Adding an icon
Badges may also have an icon:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->icons([
'heroicon-o-x',
'heroicon-o-document' => 'draft',
'heroicon-o-refresh' => 'reviewing',
'heroicon-o-truck' => 'published',
])
Alternatively, you may conditionally display an icon using a closure:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->icons([
'heroicon-o-x',
'heroicon-o-document' => static fn ($state): bool => $state === 'draft',
'heroicon-o-refresh' => static fn ($state): bool => $state === 'reviewing',
'heroicon-o-truck' => static fn ($state): bool => $state === 'published',
])
Or dynamically calculate the icon based on the $record
and / or $state
:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->icon(static function ($state): string {
if ($state === 'published') {
return 'heroicon-o-truck';
}
return 'heroicon-o-x';
})
You may set the position of an icon using iconPosition()
:
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('status')
->icons([
'heroicon-o-x',
'heroicon-o-document' => 'draft',
'heroicon-o-refresh' => 'reviewing',
'heroicon-o-truck' => 'published',
])
->iconPosition('after') // `before` or `after`
Formatting the text
All formatting options available for text columns are also available for badge columns.
Allowing the text to be copied to the clipboard
You may make the text copyable, such that clicking on the cell copies the text to the clipboard, and optionally specify a custom confirmation message and duration in milliseconds. This feature only works when SSL is enabled for the app.
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('email')
->copyable()
->copyMessage('Email address copied')
->copyMessageDuration(1500)
Filament uses tooltips to display the copy message in the admin panel. If you want to use the copyable feature outside of the admin panel, make sure you have
@ryangjchandler/alpine-tooltip
installed in your app.