Default buttons are used for non-primary actions. If not sure which button type to choose from, the default button is always a safe bet.
Emphasize on "complete" or "recommend" action. There is at most one primary button per a button group.
Low emphasis and light-weight button type, such as actions in a table.
Icon provides a visual clue.
Provides supplementary meaning to the button.
Common button types could be used to showcase to different emphasis.
Guide users to add content in an area.
Warns users that there are risks involved in the action.
Used in the dark or colored background.
Usually appeared alone and intend to used as a command. For example, it is used in the landing page or welcome banner. It could be as wide as its parent container. It is recommended to have just 1 "Call to Action" button in 1 screen.
Place buttons in the users' reading pattern for the ease of discovery, such as the "F-Shaped Reading Pattern" and "Z-Shaped Reading Pattern".
Place buttons in different areas could have different meanings.
In short, footer's purpose is to have a separation from body.
Recommend to start from the reading flow, collapsed content should always be on the right.
How to Decide Button Ordering
When multiple buttons form a group, align buttons in one line with spaces in between.
When there are too many buttons on the screen, we could group relevant buttons together and use similar design for that group. If one of the buttons is primary action, we could still use emphasis.
Collapse buttons in the order of importance
Flat display of all the buttons: could separate different groups using space; or use divider to group similar buttons.
Labels should clearly indicate to users what would happen when buttons got clicked.
Ant Design use "OK / Cancel" as default label, but you could still use below methods to customize the label text:
Describe the action result.
Publish, Login, Register.
If primary action means negative, stress the consequences.
Are you sure to delete it? Delete / Cancel
