Visual Components

App Header

Mobile app page headers — contextual top-of-screen navigation bars with leading icon, subtitle, and trailing icon controls.

V 1.0View in Storybook
Controls
Title
Show Subtitle
Show Leading Icon
Leading Icon Type
Show Trailing Icons
Trailing Icon Count
2
12:30
100%
Title

Variants

Menu + TitleHamburger menu leading icon with title and trailing icons
12:30
100%
Title
Back + TitleBack arrow leading icon with title
12:30
100%
Title
With SubtitleTitle with subtitle line below, no location icon
12:30
100%
TitleFull detailed address
No Leading IconTitle only, no leading icon
12:30
100%
Title

Props

Name
Type
Default
title
string
'Title'
subtitle
string
—
leadingIcon
boolean
true
leadingIconType
'Back' | 'Menu'
'Menu'
trailingIcons
ReactNode[]
[]
onBack
() => void
—

Code

import AppHeader from '@/src/components/Header/AppHeader'
import { Bell, Headphones } from '@phosphor-icons/react'

// Menu icon + title
<AppHeader
  type="nav-pages"
  title="Title"
  leadingIcon={true}
  leadingIconType="Menu"
  trailingIcons={[<Headphones size={24} />, <Bell size={24} />]}
/>

// Back arrow + title + subtitle
<AppHeader
  type="nav-pages"
  title="Title"
  subtitle="Full detailed address"
  leadingIcon={true}
  leadingIconType="Back"
  trailingIcons={[<Bell size={24} />]}
/>