Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA detail screen with a Back button, a title, share and more actions, a hero block and content, whose Back control goes to the previous screen and is named after it. Use this when a phone list item opens a detail view and people need an obvious way back and a few actions.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when a phone list item opens a detail view and people need an obvious way back and a few actions.
Do not use it for top-level screens (use a large-title bar) or modal tasks (use a sheet).
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | The item's title. |
backLabel | string | "Back" | Name of the previous screen; the button reads Back to {name}. |
onBack | () => void | required | Go back. |
actions | { id: string; label: string; icon: ReactNode; onSelect: () => void }[] | - | Trailing icon buttons. |
aria-labels and are at least 40px.The pattern ships with a Testing Library test (detail-screen-app-bar.test.tsx) that drives it through roles and the keyboard.