Top Header Mobile

Playground

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>
  }
/>

Examples

Default

A basic header with a back action, centered title, and a trailing search button.

Variants

Five visual styles — filled, elevated, transparent, primary, and on-color.

Sizes

Five height and padding scales from xs through xl.

Layout Modes

M3-inspired small, medium, and large layouts — medium and large drop the title below the action row.

Title Alignment

The inline title can be center aligned or start aligned within the header.

Loading

Skeleton placeholders mirror the header layout while content loads.

API Reference

TopHeaderMobile props

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.

Keyboard Navigation

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)