App Bar

A screen header built from composable slots: AppBar.Header, AppBar.Title, AppBar.BackAction, and AppBar.IconButton. Left, center, and right content are detected automatically from the children you pass in. Both icon slots accept any component matching TVajraIconComponent; the examples below use @devraj-labs/vajra-ui-icons, a small set of Lucide icons pre-adapted to that contract.

Basic title

Screen Title

<AppBar.Header>
  <AppBar.Title>Screen Title</AppBar.Title>
</AppBar.Header>

With back action and trailing icon

Profile

<AppBar.Header>
  <AppBar.BackAction icon={ChevronLeftIcon} onPress={() => {}} />
  <AppBar.Title>Profile</AppBar.Title>
  <AppBar.IconButton icon={SettingsIcon} onPress={() => {}} accessibilityLabel="More" />
</AppBar.Header>

Centered title

When centered is set on AppBar.Title, it's positioned absolutely so it stays centered regardless of side content width.

Centered

<AppBar.Header>
  <AppBar.BackAction icon={ChevronLeftIcon} onPress={() => {}} />
  <AppBar.Title centered>Centered</AppBar.Title>
  <AppBar.IconButton icon={SettingsIcon} onPress={() => {}} accessibilityLabel="More" />
</AppBar.Header>

Multiple trailing actions

AppBar.IconButton can be used more than once; every instance is collected into the right-hand slot, in order.

Recipe

<AppBar.Header>
  <AppBar.BackAction icon={ChevronLeftIcon} onPress={() => {}} />
  <AppBar.Title>Recipe</AppBar.Title>
  <AppBar.IconButton icon={SearchIcon} onPress={() => {}} accessibilityLabel="Search" />
  <AppBar.IconButton icon={HeartIcon} onPress={() => {}} accessibilityLabel="Save" />
</AppBar.Header>

Custom colors

bg and tint aren't limited to the default primary/textInverse pairing: any theme color token works, so a bar can match a surface header instead of standing out as a colored band.

Settings

<AppBar.Header bg="surface" tint="text">
  <AppBar.BackAction icon={ChevronLeftIcon} onPress={() => {}} />
  <AppBar.Title>Settings</AppBar.Title>
  <AppBar.IconButton icon={SettingsIcon} onPress={() => {}} accessibilityLabel="More" />
</AppBar.Header>

Props

AppBar.Header

Prop	Type	Default	Description
children	ReactNode		Required. Detects AppBar.BackAction (left), AppBar.IconButton (right), and AppBar.Title (center) automatically.
style	ViewStyle		Style applied to the outer container.
contentStyle	ViewStyle		Style applied to the inner row that holds the slots.
height	number	56	Height of the content row.
useSafeArea	boolean	true	Adds top safe-area inset padding.
bg	TVajraColors	'primary'	Background color token.
tint	TVajraColors	'textInverse'	Color applied to the title text and icon buttons.

AppBar.Title

Prop	Type	Default	Description
children	ReactNode		Required. Title text/content.
centered	boolean	false	Absolutely centers the title, ignoring side slot widths.

AppBar.BackAction

Prop	Type	Default	Description
icon	TVajraIconComponent		Required. Icon component receiving size, width, height, color.
onPress	() => void	Falls back to the navigation back behaviour	Press handler.

AppBar.IconButton

Prop	Type	Default	Description
icon	TVajraIconComponent		Required. Icon component receiving size, width, height, color.
onPress	() => void		Press handler.
accessibilityLabel	string	'Action'	Accessibility label for the pressable.