ant-design/24da8889-async.a97c6949.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["24da8889"],{"24da8889":function(e,s,a){"use strict";a.d(s,"__esModule",{value:!0}),a.d(s,"default",{enumerable:!0,get:function(){return u;}});var t=a("777fffbe"),n=a("f19d2b93"),i=t._(a("75f4da45")),d=t._(a("97c488ea")),o=t._(a("c96b0d01")),r=a("5b220c3d"),l=a("9c86e52a"),c=a("e9ef14dd"),u=function(){return(0,n.jsx)(l.DumiPage,{children:(0,n.jsx)(r.Suspense,{fallback:(0,n.jsx)(o.default,{}),children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsxs)("h2",{id:"design-principal",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#design-principal",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Design Principal"]}),(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:c.texts[0].value}),(0,n.jsx)("li",{children:c.texts[1].value})]}),(0,n.jsxs)("h2",{id:"types",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#types",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Types"]}),(0,n.jsxs)("h3",{id:"common-button-types",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#common-button-types",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Common Button Types"]}),(0,n.jsxs)("div",{children:[c.texts[2].value,(0,n.jsx)("img",{alt:"buttons",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*wsXrT7yQH2MAAAAAAAAAAABkARQnAQ"})]}),(0,n.jsxs)("h4",{id:"-default-button",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-default-button",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"\u2460 Default Button"]}),(0,n.jsx)("p",{children:c.texts[3].value}),(0,n.jsxs)("h4",{id:"-primary-button",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-primary-button",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"\u2461 Primary Button"]}),(0,n.jsx)("p",{children:c.texts[4].value}),(0,n.jsxs)("h4",{id:"-text-button",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-text-button",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"\u2462 Text Button"]}),(0,n.jsx)("p",{children:c.texts[5].value}),(0,n.jsxs)("h4",{id:"-icon-button",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-icon-button",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"\u2463 Icon Button"]}),(0,n.jsx)("p",{children:c.texts[6].value}),(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:c.texts[7].value}),(0,n.jsx)("li",{children:c.texts[8].value})]}),(0,n.jsxs)("h4",{id:"-text-button-with-icon",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-text-button-with-icon",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"\u2464 Text Button with Icon"]}),(0,n.jsx)("p",{children:c.texts[9].value}),(0,n.jsxs)("h3",{id:"emphasis",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#emphasis",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Emphasis"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*guusTZ6ZPxkAAAAAAAAAAABkARQnAQ"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsxs)("p",{children:[c.texts[10].value,(0,n.jsx)("strong",{children:c.texts[11].value}),c.texts[12].value]}),(0,n.jsxs)("h3",{id:"do--dont",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#do--dont",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Do & Don't"]})]}),(0,n.jsxs)(i.default,{children:[(0,n.jsx)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*di8jS5EWYSIAAAAAAAAAAABkARQnAQ",alt:"Don't",description:"Don't put more than 1 primary button in the same group."}),(0,n.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ",alt:"Do",description:"1. Emphasize on the primary action. <br/>2. If there is no primary action, then default buttons is the safest choice."})]}),(0,n.jsxs)(i.default,{children:[(0,n.jsx)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zBtTRq2xbTYAAAAAAAAAAABkARQnAQ",alt:"Don't",description:"Put 2 icons in the same button."}),(0,n.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EpwSTpaGPBgAAAAAAAAAAABkARQnAQ",alt:"Do",description:"1. Should place the buttons in the order of importance. <br/>2. The less important actions should be place on right or at bottom."}),(0,n.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ",alt:"Do",description:"1. Emphasize on the primary action. <br/>2. If there is no primary action, then default buttons is the safest choice."})]}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsxs)("h3",{id:"special-button-types",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#special-button-types",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Special Button Types"]}),(0,n.jsxs)("h4",{id:"dashed-button",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#dashed-button",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Dashed Button"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gPmNQ6_YCcoAAAAAAAAAAABkARQnAQ"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:c.texts[13].value}),(0,n.jsxs)("h4",{id:"danger-button",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#danger-button",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Danger Button"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OvNaQJrmqVMAAAAAAAAAAABkARQnAQ"})}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ujcXTqJ_IwwAAAAAAAAAAABkARQnAQ",alt:"Do",description:"If user's intention is to delete, use danger button to warn this action has risks."})}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o7EySrBPX9oAAAAAAAAAAABkARQnAQ",alt:"Do",description:"When system does not recommend the deletion action, we could set 'Cancel' as the primary action."})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:c.texts[14].value}),(0,n.jsxs)("h4",{id:"ghost-button",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#ghost-button",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Ghost Button"]}),(0,n.jsx)("p",{children:c.texts[15].value})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-wORTrNJ6YUAAAAAAAAAAABkARQnAQ"})}),(0,n.jsx)("div",{className:"markdown",children:(0,n.jsxs)("h4",{id:"call-to-action",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#call-to-action",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Call to Action"]})}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*32zdRqTjDhYAAAAAAAAAAABkARQnAQ"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:c.texts[16].value}),(0,n.jsxs)("h2",{id:"placement",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#placement",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Placement"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*B8D0RJnirLkAAAAAAAAAAABkARQnAQ"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:c.texts[17].value}),(0,n.jsxs)("h3",{id:"how-to-decide-button-placement",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-decide-button-placement",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"How to Decide Button Placement?"]}),(0,n.jsxs)("h4",{id:"pagecardsection-presents-a-subject-where-it-could-be-broken-into-3-areas",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#pagecardsection-presents-a-subject-where-it-could-be-broken-into-3-areas",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Page/Card/Section presents a subject, where it could be broken into 3 areas:"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iVZpRpdN_2AAAAAAAAAAAABkARQnAQ"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:c.texts[18].value}),(0,n.jsx)("li",{children:c.texts[19].value}),(0,n.jsx)("li",{children:c.texts[20].value})]}),(0,n.jsx)("p",{children:c.texts[21].value}),(0,n.jsxs)("h3",{id:"when-to-put-buttons-in-the-footer",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-put-buttons-in-the-footer",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"When to Put Buttons in the Footer?"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KGGWQLCBfm0AAAAAAAAAAABkARQnAQ"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:c.texts[22].value}),(0,n.jsx)("li",{children:c.texts[23].value})]}),(0,n.jsx)("p",{children:c.texts[24].value}),(0,n.jsxs)("h2",{id:"ordering",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#ordering",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Ordering"]}),(0,n.jsxs)("h3",{id:"button-ordering",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#button-ordering",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Button Ordering"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NcPDQI3IX8YAAAAAAAAAAABkARQnAQ"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:c.texts[25].value}),(0,n.jsx)("p",{children:(0,n.jsx)("strong",{children:c.texts[26].value})}),(0,n.jsxs)("ul",{children:[(0,n.jsxs)("li",{children:[c.texts[27].value,(0,n.jsx)("strong",{children:c.texts[28].value})]}),(0,n.jsx)("li",{children:c.texts[29].value})]}),(0,n.jsxs)("h3",{id:"button-group",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#button-group",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Button Group"]})]}),(0,n.jsxs)(i.default,{children:[(0,n.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tK-AQaE5h1YAAAAAAAAAAABkARQnAQ",alt:"Do"}),(0,n.jsx)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_gU7ToHiZz4AAAAAAAAAAABkARQnAQ",alt:"Don't",description:"When button group has no space in between, it is easy to confuse it with Toggle Button."})]}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:c.texts[30].value}),(0,n.jsxs)("h3",{id:"grouping-buttons",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#grouping-buttons",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Grouping Buttons"]}),(0,n.jsx)("p",{children:c.texts[31].value})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x7YsTafH5osAAAAAAAAAAABkARQnAQ"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:(0,n.jsx)("strong",{children:c.texts[32].value})}),(0,n.jsx)("br",{})]}),(0,n.jsxs)(i.default,{children:[(0,n.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qn-mQKxaQ5kAAAAAAAAAAABkARQnAQ",alt:"Do"}),(0,n.jsx)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3bUZRbPiVBEAAAAAAAAAAABkARQnAQ",alt:"Don't",description:"If buttons are in the same group, no need to add dividers between them."})]}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsxs)("p",{children:[(0,n.jsx)("strong",{children:c.texts[33].value}),c.texts[34].value]}),(0,n.jsxs)("h2",{id:"label",children:[(0,n.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#label",sourceType:"a",children:(0,n.jsx)("span",{className:"icon icon-link"})}),"Label"]})]}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*33KsR66zTY8AAAAAAAAAAABkARQnAQ",alt:"Do"})}),(0,n.jsx)(i.default,{children:(0,n.jsx)("img",{className:"preview-img no-padding bad",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*238RTb4kaPwAAAAAAAAAAABkARQnAQ",alt:"Don't",description:"Should use verb"})}),(0,n.jsxs)("div",{className:"markdown",children:[(0,n.jsx)("p",{children:c.texts[35].value}),(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:c.texts[36].value}),(0,n.jsx)("li",{children:c.texts[37].value})]}),(0,n.jsx)("p",{children:c.texts[38].value}),(0,n.jsxs)("ul",{children:[(0,n.jsxs)("li",{children:[(0,n.jsx)("p",{children:c.texts[39].value}),(0,n.jsx)("blockquote",{children:(0,n.jsx)("p",{children:c.texts[40].value})})]}),(0,n.jsxs)("li",{children:[(0,n.jsx)("p",{children:c.texts[41].value}),(0,n.jsx)("blockquote",{children:(0,n.jsx)("p",{children:c.texts[42].value})})]})]})]})]})})});};},e9ef14dd:function(e,s,a){"use strict";a.d(s,"__esModule",{value:!0}),a.d(s,"texts",{enumerable:!0,get:function(){return t;}}),a("1af8d4d2");let t=[{value:"Guide users to achieve the desired actions.",paraId:0,tocIndex:0},{value:"Prevent user to make mistakes.",paraId:0,tocIndex:0},{value:"\n  ",paraId:1},{value:"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.",paraId:2,tocIndex:3},{value:'Emphasize on "complete" or "recommend" action. There is at most one primary button per a button group.',paraId:3,tocIndex:4},{value:"Low emphasis and light-weight button type, such as actions in a table.",paraId:4,tocIndex:5},{value:"Icon provides a visual clue.",paraId:5,tocIndex:6},{value:"It could fit more buttons in a small space.",paraId:6,tocIndex:6},{value:"Buttons with icon only need to provide Tooltip to indicate the meaning of the button.",paraId:6,tocIndex:6},{value:"Provides supplementary meaning to the button.",paraId:7,tocIndex:7},{value:"Common button types could be used to showcase to different ",paraId:8},{value:"emphasis",paraId:8},{value:".",paraId:8},{value:"Guide users to add content in an area.",paraId:9},{value:"Warns users that there are risks involved in the action.",paraId:10},{value:"Used in the dark or colored background.",paraId:11,tocIndex:13},{value:'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.',paraId:12},{value:'Place buttons in the users\' reading pattern for the ease of discovery, such as the "F-Shaped Reading Pattern" and "Z-Shaped Reading Pattern".',paraId:13},{value:"Header: subject's heading, summary and navigation",paraId:14},{value:"Body: detailed content",paraId:14},{value:"Footer: supplementary information or toolbar",paraId:14},{value:"Place buttons in different areas could have different meanings.",paraId:15},{value:"Body section has collapsed or hidden content, such as it could not show the entire content in one screen;",paraId:16},{value:'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.',paraId:16},{value:"In short, footer's purpose is to have a separation from body.",paraId:17},{value:"Recommend to start from the reading flow, collapsed content should always be on the right.",paraId:18},{value:"How to Decide Button Ordering",paraId:19},{value:"Conversation Flow: place buttons in the order similar to a conversation between computers and users. ",paraId:20},{value:"Ask users the needed actions or your desired actions, then present the risks involved.",paraId:20},{value:"Navigation Flow: for example, if a button represents going back, should be placed on the left implying it is going to the previous step.",paraId:20},{value:"When multiple buttons form a group, align buttons in one line with spaces in between.",paraId:21},{value:"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.",paraId:22,tocIndex:22},{value:"Collapse buttons in the order of importance",paraId:23},{value:"Flat display of all the buttons:",paraId:24},{value:" could separate different groups using space; or use divider to group similar buttons.",paraId:24},{value:"Labels should clearly indicate to users what would happen when buttons got clicked.",paraId:25},{value:"Should use verb (except dropdown buttons)",paraId:26},{value:"Should be relevant to the context and be concise.",paraId:26},{value:'Ant Design use "OK / Cancel" as default label, but you could still use below methods to customize the label text:',paraId:27},{value:"Describe the action result.",paraId:28},{value:"Publish, Login, Register.",paraId:29},{value:"If primary action means negative, stress the consequences.",paraId:30},{value:"Are you sure to delete it? Delete / Cancel",paraId:31}];}}]);