logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • Ant Design
    • 소개
    • 设计价值观
    • Design Values
    • 实践案例
    • Cases
  • 全局样式
    • 色彩
    • 布局
    • 字体
    • 图标
    • 暗黑模式
    • 阴影
  • 전체 스타일
    • 색상
    • 레이아웃
    • 글꼴
    • 아이콘
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • 设计模式
    • 概览
    • 全局规则
      • 反馈
      • 导航
      • 数据录入
      • 数据展示
      • 文案
      • 数据格式
      • 按钮
      • 数据列表
    • 原则
      • 亲密性
      • 对齐
      • 对比
      • 重复
      • 直截了当
      • 足不出户
      • 简化交互
      • 提供邀请
      • 巧用过渡
      • 即时反应
    • 模板文档
      • 数据可视化页
      • 详情页
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • 设计模式 - 探索
    • 概览
    • 模板文档
      • 表单页
      • 工作台
      • 列表页
      • 结果页
      • 异常页
    • 全局规则
      • 导航
      • 消息与反馈
      • 空状态
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • 可视化
  • Visualization
  • 动效
  • Motion
  • 图形化
  • Illustrations

Button

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference
Work with Us

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

Design Principal

  • Guide users to achieve the desired actions.
  • Prevent user to make mistakes.

Types

Common Button Types

buttons

① Default Button

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.

② Primary Button

Emphasize on "complete" or "recommend" action. There is at most one primary button per a button group.

③ Text Button

Low emphasis and light-weight button type, such as actions in a table.

④ Icon Button

Icon provides a visual clue.

  • It could fit more buttons in a small space.
  • Buttons with icon only need to provide Tooltip to indicate the meaning of the button.

⑤ Text Button with Icon

Provides supplementary meaning to the button.

Emphasis

미리보기

Common button types could be used to showcase to different emphasis.

Do & Don't

Don't
미리보기
Don't
Don't put more than 1 primary button in the same group.
Do
미리보기
Do
1. Emphasize on the primary action.
2. If there is no primary action, then default buttons is the safest choice.
Don't
미리보기
Don't
Put 2 icons in the same button.
Do
미리보기
Do
1. Should place the buttons in the order of importance.
2. The less important actions should be place on right or at bottom.
Do
미리보기
Do
1. Emphasize on the primary action.
2. If there is no primary action, then default buttons is the safest choice.

Special Button Types

Dashed Button

미리보기

Guide users to add content in an area.

Danger Button

미리보기
Do
미리보기
Do
If user's intention is to delete, use danger button to warn this action has risks.
Do
미리보기
Do
When system does not recommend the deletion action, we could set 'Cancel' as the primary action.

Warns users that there are risks involved in the action.

Ghost Button

Used in the dark or colored background.

미리보기

Call to Action

미리보기

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.

Placement

미리보기

Place buttons in the users' reading pattern for the ease of discovery, such as the "F-Shaped Reading Pattern" and "Z-Shaped Reading Pattern".

How to Decide Button Placement?

Page/Card/Section presents a subject, where it could be broken into 3 areas:

미리보기
  • Header: subject's heading, summary and navigation
  • Body: detailed content
  • Footer: supplementary information or toolbar

Place buttons in different areas could have different meanings.

When to Put Buttons in the Footer?

미리보기
  • Body section has collapsed or hidden content, such as it could not show the entire content in one screen;
  • Body section has complex content. For example, it has multiple subgroups and each subgroup has its own actions. Now it is needed to separate "Complete" action from body section to avoid confusion.

In short, footer's purpose is to have a separation from body.

Ordering

Button Ordering

미리보기

Recommend to start from the reading flow, collapsed content should always be on the right.

How to Decide Button Ordering

  • Conversation Flow: place buttons in the order similar to a conversation between computers and users. Ask users the needed actions or your desired actions, then present the risks involved.
  • Navigation Flow: for example, if a button represents going back, should be placed on the left implying it is going to the previous step.

Button Group

Do
미리보기
Do
Don't
미리보기
Don't
When button group has no space in between, it is easy to confuse it with Toggle Button.

When multiple buttons form a group, align buttons in one line with spaces in between.

Grouping Buttons

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


Do
미리보기
Do
Don't
미리보기
Don't
If buttons are in the same group, no need to add dividers between them.

Flat display of all the buttons: could separate different groups using space; or use divider to group similar buttons.

Label

Do
미리보기
Do
Don't
미리보기
Don't
Should use verb

Labels should clearly indicate to users what would happen when buttons got clicked.

  • Should use verb (except dropdown buttons)
  • Should be relevant to the context and be concise.

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