> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Badge column
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
You are currently viewing the documentation for Filament 2.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x/tables/columns).
Badge columns render a colored badge with the cell's contents:
```php theme={"theme":"gruvbox-dark-hard"}
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`:
```php theme={"theme":"gruvbox-dark-hard"}
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`:
```php theme={"theme":"gruvbox-dark-hard"}
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`:
```php theme={"theme":"gruvbox-dark-hard"}
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:
```php theme={"theme":"gruvbox-dark-hard"}
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:
```php theme={"theme":"gruvbox-dark-hard"}
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`:
```php theme={"theme":"gruvbox-dark-hard"}
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()`:
```php theme={"theme":"gruvbox-dark-hard"}
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](./text) 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.
```php theme={"theme":"gruvbox-dark-hard"}
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](https://github.com/ryangjchandler/alpine-tooltip#installation) in your app.
### Customizing the text that is copied to the clipboard
You can customize the text that gets copied to the clipboard using the \`copyableState() method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('name')
->copyable()
->copyableState(fn (string $state): string => "Name: {$state}")
```
In this function, you can access the whole table row with `$record`:
```php theme={"theme":"gruvbox-dark-hard"}
use App\Models\User;
use Filament\Tables\Columns\BadgeColumn;
BadgeColumn::make('name')
->copyable()
->copyableState(fn (User $record): string => "Name: {$record->name}")
```
)}
Your logo here