Header

Personal address

Your home address

Personal address

Your home address

With Anchor

Click on title to get anchor link

Users

Check this on mobile

<x-header title="Personal address" subtitle="Your home address" separator />
 
<x-header title="Personal address" subtitle="Your home address" size="text-xl" separator />
 
<x-header title="With Anchor" subtitle="Click on title to get anchor link" with-anchor />
 
<x-header title="Users" subtitle="Check this on mobile">
    <x-slot:middle class="!justify-end">
        <x-input icon="o-bolt" placeholder="Search..." />
    </x-slot:middle>
    <x-slot:actions>
        <x-button icon="o-funnel" />
        <x-button icon="o-plus" class="btn-primary" />
    </x-slot:actions>
</x-header>

Progress indicator

Notice it only works combined with the separator attribute.

Always fires

Only by `save`

{{--  This fires when you call any action on the page  --}}
<x-header title="Always fires" separator progress-indicator />
 
{{-- This fires when you call the `save` action --}}
<x-header title="Only by `save`" separator progress-indicator="save" />
 
<x-button label="Some action" wire:click="something" />
 
<x-button label="Save action" wire:click="save" class="btn-warning" />

maryUI

Sponsor