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

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["24da8889"],{"24da8889":function(e,s,n){"use strict";n.d(s,"__esModule",{value:!0}),n.d(s,"default",{enumerable:!0,get:function(){return A;}});var i=n("777fffbe"),a=n("f19d2b93"),t=i._(n("75f4da45")),d=i._(n("97c488ea")),r=i._(n("c96b0d01")),l=n("5b220c3d"),c=n("9c86e52a");function o(){let{texts:e}=(0,c.useRouteMeta)();return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"markdown",children:[(0,a.jsxs)("h2",{id:"design-principal",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#design-principal",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Design Principal"]}),(0,a.jsxs)("ul",{children:[(0,a.jsx)("li",{children:e[0].value}),(0,a.jsx)("li",{children:e[1].value})]}),(0,a.jsxs)("h2",{id:"types",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#types",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Types"]}),(0,a.jsxs)("h3",{id:"common-button-types",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#common-button-types",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Common Button Types"]}),(0,a.jsxs)("div",{children:[e[2].value,(0,a.jsx)("img",{alt:"buttons",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*wsXrT7yQH2MAAAAAAAAAAABkARQnAQ"})]}),(0,a.jsxs)("h4",{id:"-default-button",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-default-button",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"\u2460 Default Button"]}),(0,a.jsx)("p",{children:e[3].value}),(0,a.jsxs)("h4",{id:"-primary-button",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-primary-button",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"\u2461 Primary Button"]}),(0,a.jsx)("p",{children:e[4].value}),(0,a.jsxs)("h4",{id:"-text-button",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-text-button",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"\u2462 Text Button"]}),(0,a.jsx)("p",{children:e[5].value}),(0,a.jsxs)("h4",{id:"-icon-button",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-icon-button",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"\u2463 Icon Button"]}),(0,a.jsx)("p",{children:e[6].value}),(0,a.jsxs)("ul",{children:[(0,a.jsx)("li",{children:e[7].value}),(0,a.jsx)("li",{children:e[8].value})]}),(0,a.jsxs)("h4",{id:"-text-button-with-icon",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-text-button-with-icon",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"\u2464 Text Button with Icon"]}),(0,a.jsx)("p",{children:e[9].value}),(0,a.jsxs)("h3",{id:"emphasis",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#emphasis",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Emphasis"]})]}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*guusTZ6ZPxkAAAAAAAAAAABkARQnAQ"})}),(0,a.jsxs)("div",{className:"markdown",children:[(0,a.jsxs)("p",{children:[e[10].value,(0,a.jsx)("strong",{children:e[11].value}),e[12].value]}),(0,a.jsxs)("h3",{id:"do--dont",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#do--dont",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Do & Don't"]})]}),(0,a.jsxs)(t.default,{children:[(0,a.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,a.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,a.jsxs)(t.default,{children:[(0,a.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,a.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,a.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,a.jsxs)("div",{className:"markdown",children:[(0,a.jsxs)("h3",{id:"special-button-types",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#special-button-types",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Special Button Types"]}),(0,a.jsxs)("h4",{id:"dashed-button",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#dashed-button",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Dashed Button"]})]}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gPmNQ6_YCcoAAAAAAAAAAABkARQnAQ"})}),(0,a.jsxs)("div",{className:"markdown",children:[(0,a.jsx)("p",{children:e[13].value}),(0,a.jsxs)("h4",{id:"danger-button",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#danger-button",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Danger Button"]})]}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OvNaQJrmqVMAAAAAAAAAAABkARQnAQ"})}),(0,a.jsx)(t.default,{children:(0,a.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,a.jsx)(t.default,{children:(0,a.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,a.jsxs)("div",{className:"markdown",children:[(0,a.jsx)("p",{children:e[14].value}),(0,a.jsxs)("h4",{id:"ghost-button",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#ghost-button",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Ghost Button"]}),(0,a.jsx)("p",{children:e[15].value})]}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-wORTrNJ6YUAAAAAAAAAAABkARQnAQ"})}),(0,a.jsx)("div",{className:"markdown",children:(0,a.jsxs)("h4",{id:"call-to-action",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#call-to-action",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Call to Action"]})}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*32zdRqTjDhYAAAAAAAAAAABkARQnAQ"})}),(0,a.jsxs)("div",{className:"markdown",children:[(0,a.jsx)("p",{children:e[16].value}),(0,a.jsxs)("h2",{id:"placement",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#placement",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Placement"]})]}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*B8D0RJnirLkAAAAAAAAAAABkARQnAQ"})}),(0,a.jsxs)("div",{className:"markdown",children:[(0,a.jsx)("p",{children:e[17].value}),(0,a.jsxs)("h3",{id:"how-to-decide-button-placement",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-decide-button-placement",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"How to Decide Button Placement?"]}),(0,a.jsxs)("h4",{id:"pagecardsection-presents-a-subject-where-it-could-be-broken-into-3-areas",children:[(0,a.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,a.jsx)("span",{className:"icon icon-link"})}),"Page/Card/Section presents a subject, where it could be broken into 3 areas:"]})]}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iVZpRpdN_2AAAAAAAAAAAABkARQnAQ"})}),(0,a.jsxs)("div",{className:"markdown",children:[(0,a.jsxs)("ul",{children:[(0,a.jsx)("li",{children:e[18].value}),(0,a.jsx)("li",{children:e[19].value}),(0,a.jsx)("li",{children:e[20].value})]}),(0,a.jsx)("p",{children:e[21].value}),(0,a.jsxs)("h3",{id:"when-to-put-buttons-in-the-footer",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-put-buttons-in-the-footer",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"When to Put Buttons in the Footer?"]})]}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KGGWQLCBfm0AAAAAAAAAAABkARQnAQ"})}),(0,a.jsxs)("div",{className:"markdown",children:[(0,a.jsxs)("ul",{children:[(0,a.jsx)("li",{children:e[22].value}),(0,a.jsx)("li",{children:e[23].value})]}),(0,a.jsx)("p",{children:e[24].value}),(0,a.jsxs)("h2",{id:"ordering",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#ordering",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Ordering"]}),(0,a.jsxs)("h3",{id:"button-ordering",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#button-ordering",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Button Ordering"]})]}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NcPDQI3IX8YAAAAAAAAAAABkARQnAQ"})}),(0,a.jsxs)("div",{className:"markdown",children:[(0,a.jsx)("p",{children:e[25].value}),(0,a.jsx)("p",{children:(0,a.jsx)("strong",{children:e[26].value})}),(0,a.jsxs)("ul",{children:[(0,a.jsxs)("li",{children:[e[27].value,(0,a.jsx)("strong",{children:e[28].value})]}),(0,a.jsx)("li",{children:e[29].value})]}),(0,a.jsxs)("h3",{id:"button-group",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#button-group",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Button Group"]})]}),(0,a.jsxs)(t.default,{children:[(0,a.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tK-AQaE5h1YAAAAAAAAAAABkARQnAQ",alt:"Do"}),(0,a.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,a.jsxs)("div",{className:"markdown",children:[(0,a.jsx)("p",{children:e[30].value}),(0,a.jsxs)("h3",{id:"grouping-buttons",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#grouping-buttons",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Grouping Buttons"]}),(0,a.jsx)("p",{children:e[31].value})]}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x7YsTafH5osAAAAAAAAAAABkARQnAQ"})}),(0,a.jsxs)("div",{className:"markdown",children:[(0,a.jsx)("p",{children:(0,a.jsx)("strong",{children:e[32].value})}),(0,a.jsx)("br",{})]}),(0,a.jsxs)(t.default,{children:[(0,a.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qn-mQKxaQ5kAAAAAAAAAAABkARQnAQ",alt:"Do"}),(0,a.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,a.jsxs)("div",{className:"markdown",children:[(0,a.jsxs)("p",{children:[(0,a.jsx)("strong",{children:e[33].value}),e[34].value]}),(0,a.jsxs)("h2",{id:"label",children:[(0,a.jsx)(d.default,{"aria-hidden":"true",tabIndex:"-1",href:"#label",sourceType:"a",children:(0,a.jsx)("span",{className:"icon icon-link"})}),"Label"]})]}),(0,a.jsx)(t.default,{children:(0,a.jsx)("img",{className:"preview-img no-padding good",src:"https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*33KsR66zTY8AAAAAAAAAAABkARQnAQ",alt:"Do"})}),(0,a.jsx)(t.default,{children:(0,a.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,a.jsxs)("div",{className:"markdown",children:[(0,a.jsx)("p",{children:e[35].value}),(0,a.jsxs)("ul",{children:[(0,a.jsx)("li",{children:e[36].value}),(0,a.jsx)("li",{children:e[37].value})]}),(0,a.jsx)("p",{children:e[38].value}),(0,a.jsxs)("ul",{children:[(0,a.jsxs)("li",{children:[(0,a.jsx)("p",{children:e[39].value}),(0,a.jsx)("blockquote",{children:(0,a.jsx)("p",{children:e[40].value})})]}),(0,a.jsxs)("li",{children:[(0,a.jsx)("p",{children:e[41].value}),(0,a.jsx)("blockquote",{children:(0,a.jsx)("p",{children:e[42].value})})]})]})]})]});}var A=function(){return(0,a.jsx)(c.DumiPage,{children:(0,a.jsx)(l.Suspense,{fallback:(0,a.jsx)(r.default,{}),children:(0,a.jsx)(o,{})})});};}}]);