Personal address
Your home address

Personal address
Your home address

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-magnifying-glass" 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