Filament v5.2.0 Adds a Callout Component

On February 5, 2026, Filament released version 5.2.0, introducing several new features aimed at enhancing user experience and functionality. Among these features is a new Callout component, which allows developers to highlight important information within forms. This article will delve into the details of the new Callout component, along with other significant updates included in this release.

Overview of Filament v5.2.0 Features

Filament v5.2.0 comes packed with five notable features, each designed to improve usability and performance for developers and end-users alike. The key features introduced in this version include:

• Callout component for highlighting important information
• Stacked table rows for better mobile readability
• Stacked action modals with overlayParentActions() method
• Deferred filters for chart widgets
• Ability to disable tenant switching via switchableTenants()

Callout Component

The introduction of the Callout component marks a significant enhancement in how developers can present information within forms. This component allows for the inclusion of important notes, warnings, or any other relevant information directly within the layout of forms. The Callout component is particularly useful in guiding users through complex forms, ensuring they do not miss critical information.

Developers can easily implement the Callout component in their schemas and forms, making it a versatile tool for enhancing user experience. The component can be customized to fit the design and functionality of the application, ensuring that it meets the specific needs of the project.

Usage Example

Here is a simple example of how to use the Callout component in a form schema:

Callout::make('Important Note')
    ->content('Please ensure all fields are filled out correctly before submission.')

This example showcases how developers can provide context-sensitive help directly within the form, improving the overall user experience.

Stacked Table Rows on Mobile

Another significant feature introduced in Filament v5.2.0 is the support for stacked table rows on mobile devices. This feature allows table rows to be displayed vertically, which enhances readability on smaller screens. Instead of requiring users to scroll horizontally, the stacked layout presents data in a more accessible format.

This CSS-first approach ensures that the standard horizontal layout is maintained on larger screens while adapting to mobile devices for optimal usability. The feature works seamlessly with existing responsive modifiers such as hiddenFrom() and visibleFrom().

Implementation Example

To implement stacked table rows, developers can utilize the following code snippet:

Table::make('User Data')
    ->columns([
        Column::make('Name'),
        Column::make('Email'),
        Column::make('Role'),
    ])
    ->responsive()

This allows the table to adapt to the screen size, providing a better experience for users accessing the application on mobile devices.

Stacked Action Modals with overlayParentActions()

The new overlayParentActions() method allows child modals to stack on top of a parent modal instead of closing and reopening it. This feature is particularly useful in scenarios where actions are nested within repeaters or other complex schemas. By maintaining the visibility of the parent modal, users can interact with multiple layers of actions without losing their context.

Example of Stacked Action Modals

Here’s an example of how to utilize the overlayParentActions() method:

Action::make('editItems')
    ->slideOver()
    ->schema([
        Repeater::make('items')
            ->deleteAction(static fn (Action $action) => $action->overlayParentActions()),
    ])
    ->action(function () {
        // Action logic here
    });

This implementation ensures that when a child modal is dismissed, the focus returns to the parent modal, enhancing the user experience by reducing disruptions.

Deferred Filters for Chart Widgets

Filament v5.2.0 also introduces deferred filters for chart widgets. This feature allows filters to be applied only when the user clicks an “Apply” button, rather than re-rendering the chart on every filter change. This can significantly improve performance, especially in applications with complex data visualizations.

To enable deferred filters, developers can set the $hasDeferredFilters property to true and implement a filtersSchema() method using standard Filament form components. Additionally, a “Reset” link can be provided to restore filters to their defaults, and an active filter badge can indicate the number of applied filters.

Implementation Example

Here’s how to implement deferred filters in a chart widget:

Chart::make('Sales Data')
    ->hasDeferredFilters(true)
    ->filtersSchema([
        Select::make('Year')->options([...]),
        DatePicker::make('Start Date'),
        DatePicker::make('End Date'),
    ])

This allows users to apply multiple filters at once, making the chart more interactive and user-friendly.

Disable Tenant Switching via switchableTenants()

For applications utilizing multi-tenancy, the new switchableTenants() method enables developers to disable the tenant switcher while still keeping the tenant menu available for other actions, such as profile and billing links. This is particularly useful when tenants are accessed through alternative means, making the switcher UI unnecessary.

Usage Example

To implement this feature, developers can use the following code:

Panel::make()
    ->switchableTenants(false);

This allows for greater flexibility in managing tenant access and enhances the overall user experience by reducing clutter in the UI.

Upgrade Notes

When upgrading to Filament v5.2.0, developers can expect no breaking changes for typical applications. However, it is always recommended to review the full changelog for complete details and ensure a smooth transition to the new version.

Conclusion

Filament v5.2.0 introduces several exciting features that enhance the development experience and improve user interaction within applications. The Callout component, stacked table rows, and other updates provide developers with powerful tools to create more effective and user-friendly interfaces. By leveraging these new features, developers can build applications that are not only functional but also engaging for users.

Note: The enhancements in Filament v5.2.0 reflect the ongoing commitment to improving the developer experience and user satisfaction, making it a valuable update for all Laravel developers.

Frequently Asked Questions