Top Header Mobile

Mobile-first top app bar with leading/trailing action slots, centered or start-aligned title, five variants, five sizes, six rounded options, three layout modes (small/medium/large), collapsible state, and full RTL support.

Installation

pnpm add @tessinaui/ui

Usage

import { TopHeaderMobile } from "@tessinaui/ui";

<TopHeaderMobile
  variant="filled"
  title="Page Title"
  leadingAction={
    <button aria-label="Back">
      <ArrowLeft className="size-5" />
    </button>
  }
  trailingActions={
    <button aria-label="Search">
      <Search className="size-5" />
    </button>
  }
/>

Playground

Preview

Showcase

Preview

API Reference

TopHeaderMobile props

Prop	Type	Default	Description
`variant`	`"filled" \| "elevated" \| "transparent" \| "primary" \| "on-color"`	`"filled"`	Visual style of the header
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Height and padding scale
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"`	`"none"`	Bottom corner rounding
`title`	`ReactNode`	—	Title text or custom element
`titleAlign`	`"start" \| "center"`	`"center"`	Title alignment within the header
`leadingAction`	`ReactNode`	—	Leading slot (typically an icon button for back/menu)
`trailingActions`	`ReactNode`	—	Trailing slot (one or more icon buttons)
`layout`	`"small" \| "medium" \| "large"`	`"small"`	Layout mode — small is single row, medium/large show title below actions
`collapsed`	`boolean`	`false`	Collapses medium/large layout to inline title (scroll behavior)
`sticky`	`boolean`	`false`	Applies sticky positioning at top
`dir`	`"ltr" \| "rtl"`	—	Text and layout direction

Variants

Filled (default)

Solid surface background. The standard app bar for most screens.

Elevated

Same as filled but with a drop shadow for visual elevation.

Transparent

No background — useful for hero/media screens where content shows behind the header.

Primary

Brand-coloured background with on-primary text. Use for branded screens.

On Color

Dark foreground background with light text. Matches the Figma reference design.

Layout Modes

Small (default)

Single row with leading action, inline title, and trailing actions. Equivalent to M3 center-aligned / small top app bar.

Medium

Title appears below the action row at medium size. When collapsed, the title moves inline.

Large

Title appears below the action row at large/prominent size. When collapsed, the title moves inline. Equivalent to M3 large top app bar.

Key	Action
`Tab`	Move focus between interactive elements (icon buttons)
`Enter` / `Space`	Activate focused button

Accessibility

Uses <header> element with role="banner" for landmark navigation
All icon buttons in slots should have aria-label attributes
Title rendered as <h1> when passed as a string
Supports dir="rtl" for right-to-left layouts — leading/trailing slots swap visually
Focus ring visible on keyboard navigation (focus-visible:ring-2)