TitleBar

V 1.0View in Storybook

Mobile-style title bar — surface × leading icon × trailing icons + optional subtitle.

Playground

Surface

Filled

Show Content

Title

Show Subtitle

Subtitle

Show Leading Icon

Leading Icon Type

Show Trailing Icons

Trailing Icon Count

URL

https://design-system-ashu.vercel.app/iframe.html?id=components-titlebar--playground&viewMode=story&args=surface%3Alight%3Bfilled%3A%21true%3BshowContent%3A%21true%3Btitle%3ATitle+Text%3BshowSubtitle%3A%21true%3Bsubtitle%3ASubtitle%3BshowLeadingIcon%3A%21true%3BleadingIconType%3Aback%3BshowTrailingIcons%3A%21true%3BtrailingIconCount%3A3

Code

<TitleBar
  surface="light"
  filled
  showContent
  title="Title Text"
  showSubtitle
  subtitle="Subtitle"
  showLeadingIcon
  leadingIconType="back"
  showTrailingIcons
  trailingIconCount={3}
/>

Props

Name	Type	Default
`surface`	`'light' \| 'dark'`	`'light'`
`filled`	`boolean`	`true`
`showContent`	`boolean`	`true`
`title`	`string`	`'Title Text'`
`showSubtitle`	`boolean`	`true`
`subtitle`	`string`	`'Subtitle'`
`showLeadingIcon`	`boolean`	`true`
`leadingIconType`	`'back' \| 'bars'`	`'back'`
`showTrailingIcons`	`boolean`	`true`
`trailingIconCount`	`number`	`3`

Usage guidelines

When to use

Use at the top of mobile screens to communicate the current context and provide navigation.
Use the back icon for drill-down flows; the bars icon for screens accessed from a root nav.
Add trailing icons (up to 3) for quick-access actions relevant to the current screen.

When not to use

Don't use on desktop layouts where a sidebar or top nav is expected.
Avoid putting more than 3 trailing icons — it overwhelms the header.
Don't hide the leading icon unless the screen is a root-level destination.