Button
Users take action and make choices by clicking.
Anatomy
Button
1
3
2
1: Container
There will be five types of buttons mainly in blue, gray, outline, green, and red.
2: icon
Optional, supports configuring icon content in front of the text.
3: Text
Must have, capitalized first letter
1: Container
Optional, divided into with container and without container.
2: Prefix icon
Optional, supports configuring icon content before the text, which is mutually exclusive with the suffix icon.
3: Text
Must have, capitalized first letter
4: Suffix icon
Optional, supports configuring icon content before the text, which is mutually exclusive with the prefix icon.
Button
Button
1
2
3
4
1: Container
There must be padding options of 24/16 for top, bottom, left, and right.
2: Button
Optional, supports any button configuration, generally for combinations of 1+2 / 2+3 levels.
2
1
Secondary
Primary
Variant/Type
Standard Button: Standard Button
Button
Button
Button
Button
Button
Level 1 Button
Level 2 Button
Level 3 button
Highlight button
Text Button:
Button
Button
Button
Button
Hot Zone
Hotspot
Hot Zone
Hotspot
Button Group:
Secondary
Primary
Tertiary
Secondary
Level 1 + Level 2
Level 2 + Level 3
Usage scenario
BTN
BTN
Button
Button
Button
Button
Button
Secondary
Primary
Type description:
Standard Button:
Level 1 (Primary): the highest-emphasis, highest-priority button; it draws the most attention and guides the user's primary action.
Level 2: lower emphasis than the primary button; can be used independently, and is generally paired with the primary or a Level 3 button.
Level 3: the weakest emphasis; usually paired with a Level 2 button and never with a Level 1 button.
Highlight Button: a multi-purpose button for actions such as price up/down, delete, or other risky operations.
Text Button: comes in large and small hit-area types, typically appearing in non-emphasis areas such as table action bars, next to titles and fields.
Button Group: generally a Level 1 + Level 2 or Level 2 + Level 3 combination, in either centered/evenly-distributed or right-aligned styles.
To support the principle of "let users focus on one thing at a time," the design system recommends:
Place only 1–2 primary buttons per page as the core conversion entry; for other scenarios, use a Level 2 + Level 3 combination.
If the page has no core conversion entry and the entries are of similar weight, consider using Level 2 buttons throughout with a Level 2 + Level 3 combination.
Button state in the form
Primary
The form is not filled out
Set the Primary button to half-highlight
Set 50% opacity
Primary
The form is not filled out, click the button.
Interaction feedback: The Input and CheckBox borders turn red
The app can add vibration
Primary
Form completed
Using the default state of the Primary button
Interactive feedback: Click to submit the form
Label
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
lg-48
xl-56
lg-16
Hot Zone
Text Button
Standard Button
Button Group
Hotspot
md-40
md-14
sm-32
sm-12
xs-28
xxs-24
Strong (Default): Level 1 + Level 2
Weak: Level 2 + Level 3
48px
56 pixels
40px
32px
28px
24px
Secondary
Primary
Secondary
Primary
Primary
Secondary
Tertiary
Secondary
Tertiary
Secondary
Secondary
Tertiary
Annotation instructions:
Standard Button: 5 button heights in total.
Text Button: 3 button heights in total, corresponding to label sizes of 16 / 14 / 12 (medium).
Button Group: within a group, the primary button is always on the right / top.
The text is very long.
Handling button labels that overflow the display width: shorten the text first; if it still overflows, reduce the font size by up to -2 (e.g., 16 down to 14, 14 down to 12); if it still overflows, wrap within a fixed height.
Secondary
DefaultDefau…
Secondary
DefaultDefau…
Secondary
DefaultDefault…
Secondary
DefaultDefault…
Secondary
DefaultDefaultDefaultDefault
DefaultDefau…
DefaultDefau…
DefaultDefau…
Assuming the default font size is 16
First dynamically shrink to 15
Still ultra-long dynamic reduced to 14
Still ultra-long dynamic reduced to 14
Wrap
Assuming the default font size is 16
Dynamically reduce to 15
...
Dynamically shrink to 12
Concise copywriting
Concise copywriting
>=2 Buttons:
When a single Button:
If reduced to the smallest font size, it is still too long.
RTL
View More
LTR
See more
RTL
Usage
Secondary
Primary
Tertiary
Secondary
Do
Tertiary
Primary
Don't
In the future, the use of 1+3 level buttons should be avoided; in most scenarios, the combination is still 1+2 or 2+3 levels.
Button
Button
Button
Do
Button
Button
Button
Don't
Within the same button group, different types of auxiliary buttons cannot be placed.
Primary Button
Secondary Button
Do
Primary Button
Secondary Button
Don't
The text must not be truncated directly or exceed the button's padding specifications.
Cancel
OK
Do
Cancel
OK
Don't
The recommended minimum width of the button is 80px, and the maximum width is the screen width minus the page's left and right padding.
Title
Primary Button
Do
Title
Primary Button
Don't
When using text buttons, pay attention to the hot area. Large hot area buttons are generally used in combination with standard buttons and are typically used with lists or modules, always using small hot area text buttons.
Button
Action Button
Control
Button Component
Click Button