Back Button
返回按钮
A left-pointing arrow that takes you back to wherever you just came from.
Live Demo
Actually clickableCurrent level: Photos / 2026 / IMG_0231
What you just saw:You tap into a conversation from a WeChat chat list and the "‹ Name" in the top-left is the back button — tapping it returns to the list with your scroll position intact.
What it actually is
The back button is the most basic and most important navigation on mobile. It answers "how do I get back to that page I was on", so it has to exist — especially on iOS, where a screen with no back arrow in the top-left is a serious usability failure.
Anatomy · What it's made of
Icon箭头图标
ChevronLeft, 24px
Label上一页名
Optional, usually the title of the previous screen
Hit Area点击热区
At least 44×44px
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Moving one level deeper on mobile | Yes |
| Users may get lost and need to go back up | Yes |
| Browser history can be relied on | Yes |
| This is step 1 of a flow (no previous level to go back to) | No |
A top-level tab at the root should not have a back button — there is nowhere to go back to.
On the web, duplicating the browser back button often feels clumsy; but in a PWA or standalone app it is mandatory.
Similar Patterns
Don't mix these upBack ButtonCurrent
返回按钮
A left-pointing arrow that takes you back to wherever you just came from.
Breadcrumb
面包屑导航
When the page hierarchy is deep, a trail like "Home › Settings › Privacy" sits at the top and answers "which level am I on?"
In one line:A left-pointing arrow that takes you back to wherever you just came from.
Breadcrumb
面包屑导航
When the page hierarchy is deep, a trail like "Home › Settings › Privacy" sits at the top and answers "which level am I on?"
Drawer
抽屉
A panel that slides in from the edge of the screen, usually from the side, sometimes from the bottom.
Icon Button
图标按钮
A button with only an icon and no text, which is only meaningful when paired with a tooltip.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a back button at the top-left of the detail page: a left arrow plus the previous screen name, which returns to the list and restores the scroll position.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a button in the top-left that goes back.
Say this instead
Add a back button at the top-left of the detail page: ChevronLeft icon plus the previous screen name, aria-label="Back to list", going back and restoring the previous scroll position, hit area ≥44×44px.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.