PageHeader

Standard page header with title, optional back navigation, subtitle, and action buttons slot. Provides consistent page header layout.

Installation

typescript

import { PageHeader } from '@happyvertical/smrt-svelte';

Basic Usage

Simple page header with just a title.

svelte

<PageHeader title="Dashboard" />

With Subtitle

Add a subtitle for additional context.

svelte

<PageHeader
  title="User Settings"
  subtitle="Manage your account preferences and security settings"
/>

With Back Navigation

Add a back link for navigation hierarchy.

svelte

<PageHeader
  title="Edit Profile"
  backHref="/settings"
  backLabel="Settings"
/>

With Action Buttons

Add action buttons using the actions slot.

svelte

<PageHeader title="Projects">
  {#snippet actions()}
    <Button variant="secondary" size="sm">Export</Button>
    <Button size="sm">New Project</Button>
  {/snippet}
</PageHeader>

Full Example

Combining all features.

svelte

<PageHeader
  title="Invoice #INV-2025-001"
  subtitle="Created on January 15, 2025"
  backHref="/invoices"
  backLabel="All Invoices"
>
  {#snippet actions()}
    <Button variant="ghost" size="sm">Download PDF</Button>
    <Button variant="secondary" size="sm">Edit</Button>
    <Button size="sm">Send</Button>
  {/snippet}
</PageHeader>

Props

Prop	Type	Default	Description
`title` *	`string`	-	Page title
`subtitle`	`string`	-	Optional subtitle/description
`backHref`	`string`	-	URL for back navigation
`backLabel`	`string`	`'Back'`	Label for back link
`actions`	`Snippet`	-	Slot for action buttons
`children`	`Snippet`	-	Additional content below title

TypeScript

typescript

import { PageHeader } from '@happyvertical/smrt-svelte';

interface Props {
  title: string;
  subtitle?: string;
  backHref?: string;
  backLabel?: string;
  actions?: Snippet;
  children?: Snippet;
}