Filament Material Theme

Appearance

See live

Toggle buttons ​

ToggleButtons renders as one of two Material components, and grouped() picks which. Left off, the options render as a button group, the connected group as Material 3 Expressive redrew it. With it, they render as a segmented button, the same component in its earlier form.

ShapeMaterial nameModifierSelected option
Button groupConnected button groupnoneFilled with the accent and rounded off completely
Segmented buttonSegmented button->grouped()Secondary container, with a check before the label

Button group ​

Three filled options held apart, the selected one fully roundedThree filled options held apart, the selected one fully rounded
php
use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('period')
    ->inline()
    ->options(['a' => 'Day', 'b' => 'Week', 'c' => 'Month']);

The options are filled and held apart rather than sharing a stroke, and the group takes its shape from its ends. Choosing one rounds it off completely, which is what marks it as chosen.

Multi select ​

Three options with the first two rounded off and filledThree options with the first two rounded off and filled
php
ToggleButtons::make('style')
    ->inline()
    ->multiple()
    ->options(['a' => 'Bold', 'b' => 'Italic', 'c' => 'Underline']);

With icons ​

Three options each with a leading icon, the selected one filled and roundedThree options each with a leading icon, the selected one filled and rounded
php
use Filament\Support\Icons\Heroicon;

ToggleButtons::make('layout')
    ->inline()
    ->options(['a' => 'List', 'b' => 'Grid', 'c' => 'Map'])
    ->icons([
        'a' => Heroicon::OutlinedListBullet,
        'b' => Heroicon::OutlinedSquares2x2,
        'c' => Heroicon::OutlinedMap,
    ]);

An option keeps its icon when it is chosen, since the shape is what marks the selection.

With colors ​

Three options with the selected one filled in successThree options with the selected one filled in success
php
ToggleButtons::make('status')
    ->inline()
    ->options(['a' => 'Draft', 'b' => 'Review', 'c' => 'Published'])
    ->colors(['a' => 'gray', 'b' => 'warning', 'c' => 'success']);

The color reaches the option that is chosen; the rest stay on the neutral container.

Segmented button ​

A toggle button with three options and the middle one selectedA toggle button with three options and the middle one selected
php
ToggleButtons::make('period')
    ->inline()
    ->grouped()
    ->options(['a' => 'Day', 'b' => 'Week', 'c' => 'Month']);

Multi select ​

A toggle button with two of its three options selectedA toggle button with two of its three options selected
php
ToggleButtons::make('style')
    ->inline()
    ->grouped()
    ->multiple()
    ->options(['a' => 'Bold', 'b' => 'Italic', 'c' => 'Underline']);

With icons ​

A toggle button whose options carry icons, with the selected one showing a checkA toggle button whose options carry icons, with the selected one showing a check
php
use Filament\Support\Icons\Heroicon;

ToggleButtons::make('layout')
    ->inline()
    ->grouped()
    ->options(['a' => 'List', 'b' => 'Grid', 'c' => 'Map'])
    ->icons([
        'a' => Heroicon::OutlinedListBullet,
        'b' => Heroicon::OutlinedSquares2x2,
        'c' => Heroicon::OutlinedMap,
    ]);

The check replaces the icon rather than sitting beside it, so the segment keeps its width.

With colors ​

A toggle button whose options each carry their own colorA toggle button whose options each carry their own color
php
ToggleButtons::make('status')
    ->inline()
    ->grouped()
    ->options(['a' => 'Draft', 'b' => 'Review', 'c' => 'Published'])
    ->colors(['a' => 'gray', 'b' => 'warning', 'c' => 'success']);