HeaderApp (Mobile)

Mobile app-level header (375px wide) with four discriminated types: `home` (logo + bell with brand dot + search icon button + avatar), `notification` (back + centered title + spacer), `search` (back + decoy search bar in focused state), `profile` (back + centered title + settings). Mirrors the Figma `HeaderApp` set (node 34341:161172) and the chilli-native `HeaderApp` primitive.

Installation

npx chilli@latest add header-app

All types

notifications

@seaspiracy

Home

Search

Notification

notifications

Profile

@seaspiracy

API Reference

HeaderApp

Prop	Type	Default	Description
`type`	`"home" \| "notification" \| "search" \| "profile"`	`"home"`	Layout variant. Each type swaps the slots and behavior.
`logo`	`ReactNode`	`—`	(home) Logo slot, 32×32. Pass a ChilliLogo or any node.
`hasNotificationDot`	`boolean`	`true`	(home) Show the brand-colored dot on the bell icon.
`avatarSrc`	`string`	`—`	(home) Avatar image src rendered as a 40×40 round button.
`onBellClick / onSearchIconClick / onAvatarClick`	`() => void`	`—`	(home) Handlers for the three trailing buttons.
`title`	`string`	`—`	(notification / profile) Centered title.
`showBack`	`boolean`	`true`	(notification / profile / search) Toggle the leading back button.
`onBack`	`() => void`	`—`	Back button handler.
`showSettings`	`boolean`	`true on profile, false on notification`	(notification / profile) Toggle the trailing settings icon. When false, a 40×40 spacer keeps the layout balanced.
`onSettingsClick`	`() => void`	`—`	Settings icon handler.
`searchPlaceholder`	`string`	`"search"`	(search) Placeholder text shown inside the decoy search bar.
`onSearchClick`	`() => void`	`—`	(search) Handler when the decoy search row is tapped — typically navigates to the search screen.