TopBar

The bar at the top of a screen: where you are, and the way back.

When to use it

• Touch clients only: React Native and Compose.
• It has the page’s background and no border, so content scrolls up to it without a line in between.
• It does not cover the status bar. Put it inside the safe area.

Example

import { Button, TopBar } from "@acme/ui-native";

<TopBar
  title="Settings"
  onBack={goBack}
  trailing={<Button variant="ghost" label="Edit" onPress={edit} />}
/>

Options

The React Native component’s props. Compose takes the same options under its own naming conventions.

Prop	Type	Notes
title	string	Required.
onBack	() => void	Shows a back button.
backLabel	string	What a screen reader says for the back button. Defaults to Back.
trailing	ReactNode	An action at the far end, such as a ghost button.

Source

Platform	File
React Native	packages/ui-native/src/TopBar.tsx
Compose Multiplatform	kotlin/ui/src/commonMain/kotlin/acme/ui/TopBar.kt