Skip to content

Colours and icons

Values and whole records can be coloured, values get icons and a second line. Colour should never be the only information: add a hint, a badge or an icon as well.

Colours are the semantic tones of the theme, readable in light and dark mode: primary, secondary, success, info, warning, danger (Column::TONES).

// A closure: fn ($value, $record) returns a tone or null
TextColumn::make('balance')->money('EUR')->color(fn ($balance) => $balance < 0 ? 'danger' : null),
// A tone per value (compared as string)
TextColumn::make('stock')->color(['0' => 'warning']),

The closure may return null for no colour; anything that is not a tone is ignored. Fixed tones in an array are checked when the column is defined (InvalidArgumentException). The colour applies in table and cards.

For status values a badge is usually clearer than a coloured text.

tone() on the collection colours a whole record – the table row gets a stripe at the start and a light background, the card a border on the left and a light background:

$collection->tone(fn ($employee) => match (true) {
$employee->exit_on !== null && $employee->exit_on < date('Y-m-d') => 'warning', // left
$employee->entry_on > date('Y-m-d') => 'info', // joins soon
default => null,
});

icon() puts a Bootstrap icon before the value, fixed or per value:

TextColumn::make('entry_date')->date()->icon('box-arrow-in-right'),
TextColumn::make('channel')->icon(fn ($channel) => match ($channel) {
'mail' => 'envelope',
'phone' => 'telephone',
default => null,
}),

Names must match [a-z0-9-] (at most 60 characters): a fixed name that does not throws an InvalidArgumentException, a closure result that does not is ignored. Icons are decorative (aria-hidden); the value must speak for itself. Empty values get no icon.

In cards the meta area shows icons instead of labels: give the columns there an icon.

A smaller second line under the value, in the table only:

TextColumn::make('name')->description('email'), // an attribute of the record
TextColumn::make('name')->description(fn ($person) => $person->department . ' · ' . $person->room),

The text is escaped; null or '' shows no line.