Button
Users take action and make choices by clicking.
Anatomy
Button
1
3
2
1: Container
There must be, with a default of 5 colors, supporting business customization.
2: icon
Optional, supports configuring icon content in front of the text, supports business customization.
3: Text
Must have, capitalized first letter, supports business customization
1: Container
Optional, divided into with container and without container.
2: Prefix icon
Optional, mutually exclusive with the suffix icon, supports business customization.
3: Text
Must have, capitalized first letter, supports business customization
4: Suffix icon
Optional, mutually exclusive with the prefix icon, supports business customization.
1: Container
It must be supported for business customization.
2: Button
Optional, usually a combination of level 1+2 / 2+3, supporting business custom configuration buttons.
Button
Button
1
2
1
2
3
4
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
Button
Button
Button
Button
Button
Button
Type description:
Standard Button:
Level 1 Button: Also known as the primary button, it has the highest level of emphasis and the highest operational priority. It is the button that most attracts user attention and guides user actions.
Level 2 Button: The level of emphasis is second to the primary button. It can be used independently and is generally paired with primary buttons or Level 3 buttons.
Level 3 Button: Has the weakest level of emphasis and is usually paired with Level 2 buttons, not with Level 1 buttons.
Highlight Button: Generally used as multi-functional buttons for rise/fall, deletion, risk operations, etc.
Text Button: Mainly divided into large hot area and small hot area types, usually appearing in non-emphasis areas such as table operation bars, beside titles, and fields.
Button Group: Generally a combination of Level 1 + Level 2, or Level 2 + Level 3.
*To satisfy the capability of [letting users focus on doing only one thing at a time], DS suggests:
Within a single page scenario, place only 1 primary button as the core conversion entry. It is recommended to use a combination of Level 2 + Level 3 buttons for other scenarios within the page.
If there is no core conversion entry in the page and the entry levels are not much different, you can collectively consider placing Level 2 buttons and using a combination of Level 2 + Level 3.
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
lg-48
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
40px
32px
28px
24px
Secondary
Primary
Primary
Secondary
Tertiary
Secondary
Secondary
Tertiary
Annotation instructions:
Standard Button: A total of 5 button heights
Text Button: A total of 3 button heights, corresponding to button text sizes of 16, 14, and 12 medium respectively
Button Group: Within a button group, the primary button is always on the right / top
Multilingual adaptation
Default Button
Default Button
Default Button
Default Button Button…
Assuming the default font size is 16
Dynamic shrink:
Change layout:
Dynamically reduce to 15
dynamically scale down to 14
······
Dynamically shrink to 10 still too long
Concise copywriting
Secondary Seco…
Secondary
SecondarySeconLnSecondary
SecondarySeconLnSecondary
Super long explanation:
Prioritize simplifying the text
Shrink dynamically, minimum font size 10px
Change layout, arrange vertically
Extreme cases, such as line breaks in German
Dynamic width, minimum button width 80px
RTL
See more
LTR
View 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.