Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
Live Demo
Actually clickableTry the disabled state:
What you just saw:"Log in" on a sign-in page, "Save" in settings, "Cancel / OK" at the bottom of a dialog — anything that triggers a concrete action is a button.
What it actually is
The button is the starting point of every action. It has no special visual identity of its own: it can come in any color and size, but it is always the thing that triggers an action when pressed.
Anatomy · What it's made of
Container容器
Min hit area 44×44px, 8px corner radius
Label文字
Starts with a verb and states the result
Leading Icon前置图标
Optional, only when it aids recognition
Loading State加载态
Clicks disabled and a spinner shown
Disabled State禁用态
Lower contrast but still readable
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Triggering a clear action (submit, delete, save) | Yes |
| The action is the next step on the current page | Yes |
| You need to express hierarchy: Primary + Secondary | Yes |
| It only navigates to another page with no semantics of its own | Depends |
| More than 3 equally weighted primary buttons on one page | No |
A row of text links at the top of the page that all look like buttons destroys the hierarchy.
A label of "OK" makes users nervous — "Delete photo" is far friendlier than "OK".
Similar Patterns
Don't mix these upButtonCurrent
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
CTA
行动号召按钮
The single most important button on the page — it is the one thing you want the user to do next.
In one line:The most basic clickable element in the interface — the user taps it and one thing happens.
CTA
行动号召按钮
The single most important button on the page — it is the one thing you want the user to do next.
Icon Button
图标按钮
A button with only an icon and no text, which is only meaningful when paired with a tooltip.
FAB
浮动操作按钮
The round button that floats in the corner of the screen, usually carrying the "create" action.
Split Button
分裂按钮
A default action on the left and a dropdown arrow on the right, where the right side reveals other variants of the same action.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a pair of buttons at the bottom of the edit page: a secondary "Cancel" on the left and a primary "Save" on the right. While saving, show loading and disable it.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a button.
Say this instead
Add a pair of buttons: a primary "Save photo" (dark, solid) and a secondary "Cancel" (white with an outline). The primary button shows a loading state and disables on click.
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.