https://akmistanbul.gov.tr/_next/static/chunks/pages/docs/button-cb64e46195b98233209d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8508],{16621:function(n,t,e){"use strict";var o=e(92809),r=e(10219),u=e(93782),a=e(85893),i=["className","fill","fontSize","label","name","size"];function c(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,o)}return e}t.Z=function(n){var t=n.className,e=n.fill,s=n.fontSize,l=n.label,d=n.name,p=n.size,h=void 0===p?"medium":p,f=(0,r.Z)(n,i),b=["icon",d];return(0,a.jsx)("span",function(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?c(Object(e),!0).forEach((function(t){(0,o.Z)(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):c(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}({"aria-label":l||d,className:(0,u.e7)(b,t),"data-size":h,role:"img",style:{color:e,fontSize:s}},f))}},31084:function(n,t,e){"use strict";e.r(t),e.d(t,{default:function(){return o.Z}});var o=e(16621)},76169:function(n,t,e){"use strict";e.r(t),e.d(t,{default:function(){return f}});var o=e(4812),r=e(80923),u=e(74169),a=e(31084),i=e(85893);function c(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("h4",{children:"Default"}),(0,i.jsx)("p",{children:"The default form of a button, used for most cases. They are not impactful enough to represent the primary action in a container."}),(0,i.jsx)(o.en,{code:"import Button from '@/components/button';\n\n<Button>Default button</Button>",children:(0,i.jsx)(u.ButtonGroup,{children:(0,i.jsx)(u.default,{children:"Default button"})})})]})}function s(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("h3",{children:"Appearance"}),(0,i.jsx)("h4",{children:"Primary"}),(0,i.jsxs)("p",{children:["Use a ",(0,i.jsx)("code",{children:"primary"})," button to call attention to an action on a ",(0,i.jsx)(r.Z,{href:"/components/form",children:"form"})," or to highlight the strongest call to action on a page. Primary buttons should only appear once per container (not including the application header or in a ",(0,i.jsx)(r.Z,{href:"/components/modal-dialog",children:"modal dialog"}),"). Not every screen requires a primary button."]}),(0,i.jsx)(o.en,{code:"import Button from '@/components/button';\n\n<Button appearance=\"primary\">Primary button</Button>",children:(0,i.jsx)(u.default,{appearance:"primary",children:"Primary button"})}),(0,i.jsx)("h4",{children:"Subtle"}),(0,i.jsxs)("p",{children:["Use a ",(0,i.jsx)("code",{children:"subtle"})," button with a ",(0,i.jsx)("code",{children:"primary"}),' button for secondary actions, such as \u201cCancel".']}),(0,i.jsx)(o.en,{code:"import Button from '@/components/button';\n\n<Button appearance=\"subtle\">Subtle button</Button>",children:(0,i.jsx)(u.default,{appearance:"subtle",children:"Subtle button"})}),(0,i.jsx)("h4",{children:"Neutral"}),(0,i.jsxs)("p",{children:["The ",(0,i.jsx)("code",{children:"neutral"})," button is the button in the theme's reverse view. Use when a status is not stated and needs attention."]}),(0,i.jsx)(o.en,{code:"import Button from '@/components/button';\n\n<Button appearance=\"neutral\">Neutral button</Button>",children:(0,i.jsx)(u.default,{appearance:"neutral",children:"Neutral button"})}),(0,i.jsx)("h4",{children:"Status"}),(0,i.jsxs)("p",{children:["Status buttons appear as a final confirmation for a specific action, such as ",(0,i.jsx)("code",{children:"danger"}),", ",(0,i.jsx)("code",{children:"help"}),", ",(0,i.jsx)("code",{children:"info"}),",  ",(0,i.jsx)("code",{children:"success"})," and ",(0,i.jsx)("code",{children:"warning"}),". These are mostly found in confirmation modes."]}),(0,i.jsx)("h5",{children:"Filled"}),(0,i.jsx)(o.en,{code:'import Button, { ButtonGroup } from \'@/components/button\';\n\n<ButtonGroup>\n  <Button appearance="danger">Danger button</Button>\n  <Button appearance="help">Help button</Button>\n  <Button appearance="info">Info button</Button>\n  <Button appearance="success">Success button</Button>\n  <Button appearance="warning">Warning button</Button>\n</ButtonGroup>',children:(0,i.jsxs)(u.ButtonGroup,{children:[(0,i.jsx)(u.default,{appearance:"danger",children:"Danger button"}),(0,i.jsx)(u.default,{appearance:"help",children:"Help button"}),(0,i.jsx)(u.default,{appearance:"info",children:"Info button"}),(0,i.jsx)(u.default,{appearance:"success",children:"Success button"}),(0,i.jsx)(u.default,{appearance:"warning",children:"Warning button"})]})}),(0,i.jsx)("h5",{children:"Outlined"}),(0,i.jsx)(o.en,{code:'import Button, { ButtonGroup } from \'@/components/button\';\n\n<ButtonGroup>\n  <Button appearance="danger" isOutline>Danger button</Button>\n  <Button appearance="help" isOutline>Help button</Button>\n  <Button appearance="info" isOutline>Info button</Button>\n  <Button appearance="success" isOutline>Success button</Button>\n  <Button appearance="warning" isOutline>Warning button</Button>\n</ButtonGroup>',children:(0,i.jsxs)(u.ButtonGroup,{children:[(0,i.jsx)(u.default,{appearance:"danger",isOutline:!0,children:"Danger button"}),(0,i.jsx)(u.default,{appearance:"help",isOutline:!0,children:"Help button"}),(0,i.jsx)(u.default,{appearance:"info",isOutline:!0,children:"Info button"}),(0,i.jsx)(u.default,{appearance:"success",isOutline:!0,children:"Success button"}),(0,i.jsx)(u.default,{appearance:"warning",isOutline:!0,children:"Warning button"})]})})]})}function l(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("h3",{children:"State"}),(0,i.jsx)("h4",{children:"Disabled"}),(0,i.jsxs)("p",{children:["Set ",(0,i.jsx)("code",{children:"isDisabled"})," to disable a button when another action has to be completed before the button is usable, such as changing a text field value or waiting for a system response."]}),(0,i.jsx)(o.en,{code:"import Button from '@/components/button';\n\n<Button isDisabled>Disabled button</Button>",children:(0,i.jsx)(u.ButtonGroup,{children:(0,i.jsx)(u.default,{isDisabled:!0,children:"Disabled button"})})}),(0,i.jsx)("h4",{children:"Loading"}),(0,i.jsxs)("p",{children:["Set ",(0,i.jsx)("code",{children:"isLoading"})," to indicate the button is loading. The button text is hidden and a spinner is shown in its place, while maintaining the width that it would have if the text were visible."]}),(0,i.jsx)(o.en,{code:"import Button from '@/components/button';\n\n<Button isLoading>Loading button</Button>",children:(0,i.jsx)(u.ButtonGroup,{children:(0,i.jsx)(u.default,{isLoading:!0,children:"Loading button"})})})]})}function d(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("h4",{children:"Spacing"}),(0,i.jsx)("p",{children:"Buttons can have various spacing. Default spacing is used for most use cases, compact for tables and none for breadcrumbs."}),(0,i.jsx)(o.en,{code:'import Button, { ButtonGroup } from \'@/components/button\';\n\n<ButtonGroup>\n  <Button appearance="danger">Danger button</Button>\n  <Button appearance="help">Help button</Button>\n  <Button appearance="info">Info button</Button>\n  <Button appearance="success">Success button</Button>\n  <Button appearance="warning">Warning button</Button>\n</ButtonGroup>',children:(0,i.jsxs)(u.ButtonGroup,{children:[(0,i.jsx)(u.default,{spacing:"strong",children:"Strong"}),(0,i.jsx)(u.default,{children:"Default"}),(0,i.jsx)(u.default,{spacing:"compact",children:"Compact"}),(0,i.jsx)(u.default,{spacing:"none",children:"None"})]})})]})}function p(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("h4",{children:"Button with icon"}),(0,i.jsx)("p",{children:"Buttons may include an icon before or after the text."}),(0,i.jsx)(o.en,{code:'import Button, { ButtonGroup } from \'@/components/button\';\n\n<ButtonGroup>\n  <Button iconBefore={<Icon name="icon-home" />} />\n  <Button iconBefore={<Icon name="icon-youtube" />}>Icon Before</Button>\n  <Button iconAfter={<Icon name="icon-twitter" />}>Icon After</Button>\n</ButtonGroup>',children:(0,i.jsxs)(u.ButtonGroup,{children:[(0,i.jsx)(u.default,{iconBefore:(0,i.jsx)(a.default,{name:"icon-home"})}),(0,i.jsx)(u.default,{iconBefore:(0,i.jsx)(a.default,{name:"icon-youtube"}),children:"Icon Before"}),(0,i.jsx)(u.default,{iconAfter:(0,i.jsx)(a.default,{name:"icon-twitter"}),children:"Icon After"})]})})]})}function h(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("h3",{children:"Button Group"}),(0,i.jsx)("h4",{children:"Default"}),(0,i.jsx)("p",{children:"A button group displays multiple buttons together."}),(0,i.jsx)(o.en,{code:"\n  import Button from '@/components/button';\n\n  <ButtonGroup>\n    <Button>First button</Button>\n    <Button>Second button</Button>\n    <Button>Third button</Button>\n  </ButtonGroup>\n  ",children:(0,i.jsxs)(u.ButtonGroup,{children:[(0,i.jsx)(u.default,{children:"First button"}),(0,i.jsx)(u.default,{children:"Second button"}),(0,i.jsx)(u.default,{children:"Third button"})]})}),(0,i.jsx)("h4",{children:"Appearance"}),(0,i.jsxs)("p",{children:["The ",(0,i.jsx)("code",{children:"appearance"})," to apply to all buttons."]}),(0,i.jsx)(o.en,{code:"\n  import Button from '@/components/button';\n\n  <ButtonGroup appearance=\"primary\">\n    <Button>First button</Button>\n    <Button>Second button</Button>\n    <Button>Third button</Button>\n  </ButtonGroup>\n  ",children:(0,i.jsxs)(u.ButtonGroup,{appearance:"primary",children:[(0,i.jsx)(u.default,{children:"First button"}),(0,i.jsx)(u.default,{children:"Second button"}),(0,i.jsx)(u.default,{children:"Third button"})]})})]})}function f(){return(0,i.jsxs)(o.ZP,{heading:"Button",description:"A button triggers an event or action. They let users know what will happen next.",children:[(0,i.jsx)(c,{}),(0,i.jsx)(s,{}),(0,i.jsx)(l,{}),(0,i.jsx)(d,{}),(0,i.jsx)(p,{}),(0,i.jsx)(h,{})]})}},45229:function(n,t,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/button",function(){return e(76169)}])}},function(n){n.O(0,[9351,3509,8873,3916,9774,2888,179],(function(){return t=45229,n(n.s=t);var t}));var t=n.O();_N_E=t}]);