Top bar
Ready
Names the screen and holds the way back, plus up to two screen-wide actions.
Platforms Phone · TabletGroup NavigationUpdated 26 Oct 2026
When to use
- Every list, form and settings screen that is not a record detail.
- The screen needs a way back or a way to close.
When not to use
| If people need to | Use |
|---|
| Show one record with its owner | Record header |
| Move between the main parts of a module | Bottom navigation |
| Title a bottom sheet | Bottom sheet |
Anatomy
arrow_backTitlesearchmore_vert
- Back or close · optional; back for drill-in screens, close for forms
- Title · required, one line
- Action icon · optional, up to two
- More icon · optional, opens the menu
Variants
| Variant | Purpose | Figma |
|---|
| Back | Drill-in screens | Designed |
| Back and actions | Screens with search or a menu of screen-wide actions | Designed |
| Close | Forms that open on top of a list | Designed |
| Title only | The first screen of a module | Designed |
States
| State | When | What changes | Figma |
|---|
| Default | Always | As specified | Designed |
| Icon pressed | Finger is down on an icon | A 10% black circle behind the icon | Temporary rule |
Behaviour
- Stays at the top while the page scrolls.
- Back returns to the previous screen; Close leaves the form.
- A long title cuts off with "…" on one line; it never wraps.
Phone and tablet
| Phone | Tablet |
|---|
| Height | 72 | 72 |
| Padding | 26 top, 22 bottom, 16 sides | 20 all round |
| Title | 20 Medium, left | 20 Medium, left |
Content
| Part | Rule |
|---|
| Title | The screen name in sentence case, two or three words: "New request", "Settings" |
| Avoid | Repeating the title in the page body; module names already shown on the home screen |
Do and don't
DoKeep one or two icons on the right and put the rest in the menu.
arrow_backTitle of the scr…searchdownloadeditmore_vert
Don'tCrowd the bar with icons until the title is cut off.
Specs
Click a value to copy it.
| Part | Property | Phone | Tablet |
|---|
| Bar | Height | | |
| Fill | | |
| Bottom line | | |
| Padding | | |
| Gap | | |
| Back or close | Slot | | |
| Icon | | |
| Title | Type | | |
| Colour | | |
| Action icon | Button | | |
| Icon | | |
Accessibility
- Back, close and every icon button carry a spoken label ("Back", "Close", "Search", "More actions").
- The back slot is drawn 30 × 48; its tap area extends to 44 wide into the gap. The 36 icon buttons extend to 44 inside the 72 bar.
- The title is the screen's main heading for screen readers.
- Ink on white scores 8.0.
Changes
| Date | Change |
|---|
| 26 Oct 2026 | Title colour set to Ink; 1px bottom line on every top bar. |