Skip to content

Overview

The <x-aura::header> component renders a page or section header with a title, optional description, and an actions area. The layout places the title/description on the left and action buttons on the right, using flexbox alignment. It supports multiple sizes to adapt to page-level or section-level contexts.

Use header for:

  • Page titles with action buttons (Create, Export)
  • Section headers within cards or panels
  • Dashboard area headings
  • Settings page sections

Basic Usage

Users

Manage your team members and their roles.

<x-aura::header title="Users" description="Manage your team members and their roles." />

Props

Prop Type Default Description
title string '' The heading text
description string|null null Optional subtitle or description text below the title
size string 'md' Title size: sm, md, lg, xl

Size mapping:

  • sm -> text-lg
  • md -> text-xl
  • lg -> text-2xl
  • xl -> text-3xl

Slots

Slot Description
actions Right-aligned area for buttons, links, or controls

Variants / Examples

With Action Buttons

Products

View and manage your product catalog.

<x-aura::header title="Products" description="View and manage your product catalog.">
    <x-slot:actions>
        <x-aura::button variant="outline" icon="download">Export</x-aura::button>
        <x-aura::button icon="plus">Add Product</x-aura::button>
    </x-slot:actions>
</x-aura::header>

Small Section Header

Recent Activity

<x-aura::header title="Recent Activity" size="sm" />

Large Page Header

Dashboard

Welcome back. Here's what's happening today.

<x-aura::header
    title="Dashboard"
    description="Welcome back. Here's what's happening today."
    size="xl"
>
    <x-slot:actions>
        <x-aura::button variant="ghost" icon="settings">Settings</x-aura::button>
    </x-slot:actions>
</x-aura::header>

Inside a Card

Billing

Manage your subscription and payment methods.

<x-aura::card>
    <x-aura::header title="Billing" description="Manage your subscription and payment methods." size="sm">
        <x-slot:actions>
            <x-aura::button variant="outline" size="sm">Update Plan</x-aura::button>
        </x-slot:actions>
    </x-aura::header>
    {{-- Card content --}}
</x-aura::card>

Accessibility

  • The title renders as an <h2> element, providing semantic heading structure for the section.
  • The description renders as a <p> element with muted styling for clear visual hierarchy.
  • The flex layout ensures title and actions are properly aligned and responsive, with min-w-0 preventing text overflow issues.