PxHeader

A unified header component for pages, forms, and lists.

Usage

<script setup lang="ts">
import { PxHeader } from 'praxis-vue-ui'
import { Plus, Download } from '@lucide/vue'
</script>

Page Variant (Default)

Used for main page headers.

Page Header

Projects

237 active projects

<PxHeader title="Projects" subtitle="237 active projects">
  <template #actions>
    <button>Export</button>
    <button>New Project</button>
  </template>
</PxHeader>

Form Variant

Used for separating sections inside a form. It automatically prefixes the title with "Create" or "Edit" based on isEditMode unless disablePrefix is true.

Form Header

Edit Project

<PxHeader variant="form" title="Project" :is-edit-mode="true">
  <template #actions>
    <button>Cancel</button>
    <button>Save</button>
  </template>
</PxHeader>

List Variant

A minimal header used above lists or data tables.

List Header

Recent Activity

<PxHeader variant="list" title="Recent Activity">
  <template #actions>
    <button>View All</button>
  </template>
</PxHeader>

API Reference

Prop	Type	Default	Description
variant	"page" | "form" | "list"	'page'	The variant defines the visual hierarchy and layout of the header
title	string	—	Main title text
subtitle	string	—	Subtitle text (mostly used in 'page' variant)
containerClass	string	—	Custom class for the outermost container
isEditMode	boolean	false	If true, prefixes the title with "Edit " instead of "Create " (only for 'form' variant)
disablePrefix	boolean	false	If true, disables the automatic "Create/Edit" prefix in 'form' variant