Skip to main content
Version: 2.x

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.