Skip to main content
The Heading component is used for main page titles. It displays a large, bold heading with an optional action slot for buttons or other controls.

​
Preview

Products

​
Usage

<x-shopper::heading>
    <x-slot:title>Products</x-slot:title>

    <x-slot:action>
        <x-filament::button tag="a" href="{{ route('shopper.products.create') }}">
            Add Product
        </x-filament::button>
    </x-slot:action>
</x-shopper::heading>

​
Slots

​
title
Slot
required
The heading title. Can be plain text or a custom slot with additional elements.
​
action
Slot
Optional slot for action buttons or controls aligned to the right.

​
Examples

​
Simple Heading

Dashboard
<x-shopper::heading>
    <x-slot:title>Dashboard</x-slot:title>
</x-shopper::heading>

​
Heading with Action Button

Categories
<x-shopper::heading>
    <x-slot:title>Categories</x-slot:title>

    <x-slot:action>
        <x-filament::button wire:click="create">
            New Category
        </x-filament::button>
    </x-slot:action>
</x-shopper::heading>

​
Heading with Multiple Actions

Orders
<x-shopper::heading>
    <x-slot:title>Orders</x-slot:title>

    <x-slot:action>
        <div class="flex items-center gap-2">
            <x-filament::button color="gray" wire:click="export">
                Export
            </x-filament::button>
            <x-filament::button wire:click="create">
                Create Order
            </x-filament::button>
        </div>
    </x-slot:action>
</x-shopper::heading>

​
Custom Title Slot

For more complex titles, you can use the title as a slot: 
<x-shopper::heading>
    <x-slot:title>
        <div class="flex items-center gap-3">
            <span>Product: iPhone 15</span>
            <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">
                Published
            </span>
        </div>
    </x-slot:title>

    <x-slot:action>
        <x-filament::button color="danger">
            Unpublish
        </x-filament::button>
    </x-slot:action>
</x-shopper::heading>

​
Blade Component Source

The Heading component is located at packages/admin/resources/views/components/heading.blade.php: 
<div
    {{ $attributes->twMerge(['class' => 'space-y-3 sm:flex sm:items-center sm:justify-between sm:space-x-4 sm:space-y-0']) }}
>
    @if ($title instanceof \Illuminate\View\ComponentSlot)
        {{ $title }}
    @else
        <h2
            class="font-heading text-2xl font-bold text-gray-900 sm:truncate sm:text-3xl dark:text-white"
        >
            {{ $title }}
        </h2>
    @endif

    @isset($action)
        {{ $action }}
    @endisset
</div>