Header

organisms

Admin page header — 80px min-height, 24px vertical / 16px horizontal padding. Left: title (24px/600) + subtitle. Right: SearchPill + IconButton stack + UserProfile.

ARIA Role: banner

Demo

Demo for Header (organisms)

Admin page header — 80px min-height, 24px vertical / 16px horizontal padding. Left: title (24px/600) + subtitle. Right: SearchPill + IconButton stack + UserProfile.

Props

PropTypeRequiredDefaultDescription
titlestringYes—

TypeScript Interface

interface HeaderProps {
  title: string;
  subtitle?: string;
  showSearch?: boolean;
  onSearch?: (query: string) => void;
  rightActions?: { id: string; icon: React.ReactNode; ariaLabel: string; onClick: () => void; badge?: BadgeConfig }[];
  user?: UserProfileConfig;
  onThemeToggle?: () => void;
  themePressed?: boolean;
}

Assertions (NASA Rule 5)

  • [type]title required(NASA Rule 5)
  • [aria]Must be <header role='banner'>(WCAG 1.3.1)

Usage

Import

import { Header } from '@epasslive/design-system'

Basic

<Header />

With Variants

<Header variant="primary" size="md" />