component---docs-components-button-button-en-mdx-6c2d6bfa408b7125a7bf.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{"/AwZ":function(t,e,n){"use strict";n.r(e),n.d(e,"_frontmatter",(function(){return s})),n.d(e,"default",(function(){return p}));var o=n("Fcif"),a=n("+I+c"),r=n("/FXl"),i=n("TjRS"),u=n("ZFoC"),c=n("zL5+"),d=n("3ql3"),l=n("DrYe"),s=(n("aD51"),{});void 0!==s&&s&&s===Object(s)&&Object.isExtensible(s)&&!s.hasOwnProperty("__filemeta")&&Object.defineProperty(s,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"docs/components/button/button.en.mdx"}});var b={_frontmatter:s},m=i.a;function p(t){var e,n,p=t.components,y=Object(a.a)(t,["components"]);return Object(r.b)(m,Object(o.a)({},b,y,{components:p,mdxType:"MDXLayout"}),Object(r.b)("h1",{id:"button"},"Button"),Object(r.b)("p",null,"Buttons allow users to take actions, and make choices, with a single tap."),Object(r.b)("h2",{id:"examples"},"Examples"),Object(r.b)(u.c,{__position:0,__code:'<Button>Zain</Button>\n<Button variant="outlined">outlined</Button>\n<Button variant="contained" size="small">\n  small\n</Button>\n<Button variant="contained" size="medium">\n  medium\n</Button>\n<Button variant="contained" size="large">\n  large\n</Button>\n<Button variant="contained" color="primary">\n  Primary\n</Button>\n<Button variant="contained" color="secondary">\n  Secondary\n</Button>\n<Button variant="contained" disabled>\n  Disabled\n</Button>\n<Button variant="contained" color="primary" href="#contained-buttons">\n  Link\n</Button>',__scope:(e={props:y,DefaultLayout:i.a,Playground:u.c,useThemeUI:c.j,Props:d.a,Button:l.Button},e.DefaultLayout=i.a,e._frontmatter=s,e),language:"tsx",wrapper:"https://codesandbox.io/s/zain-ui-button-7xsri?file=/src/buttonDemo.tsx|https://stackblitz.com/edit/zain-ui-button?file=buttonDemo.tsx",mdxType:"Playground"},Object(r.b)(l.Button,{mdxType:"Button"},"Zain"),Object(r.b)(l.Button,{variant:"outlined",mdxType:"Button"},"outlined"),Object(r.b)(l.Button,{variant:"contained",size:"small",mdxType:"Button"},"small"),Object(r.b)(l.Button,{variant:"contained",size:"medium",mdxType:"Button"},"medium"),Object(r.b)(l.Button,{variant:"contained",size:"large",mdxType:"Button"},"large"),Object(r.b)(l.Button,{variant:"contained",color:"primary",mdxType:"Button"},"Primary"),Object(r.b)(l.Button,{variant:"contained",color:"secondary",mdxType:"Button"},"Secondary"),Object(r.b)(l.Button,{variant:"contained",disabled:!0,mdxType:"Button"},"Disabled"),Object(r.b)(l.Button,{variant:"contained",color:"primary",href:"#contained-buttons",mdxType:"Button"},"Link")),Object(r.b)("br",null),Object(r.b)("br",null),Object(r.b)(u.c,{__position:2,__code:"() => {\n  const { colorMode } = useThemeUI()\n  return (\n    <Button\n      variant=\"contained\"\n      color={colorMode === 'dark' ? 'primary' : 'default'}\n    >\n      {colorMode}\n    </Button>\n  )\n}",__scope:(n={props:y,DefaultLayout:i.a,Playground:u.c,useThemeUI:c.j,Props:d.a,Button:l.Button},n.DefaultLayout=i.a,n._frontmatter=s,n),mdxType:"Playground"},(function(){var t=Object(c.j)().colorMode;return Object(r.b)(l.Button,{variant:"contained",color:"dark"===t?"primary":"default",mdxType:"Button"},t)})),Object(r.b)("h2",{id:"api"},"API"),Object(r.b)(d.a,{propsItems:[{name:"children",type:"React.ReactNode",default:"",description:"The content of the button."},{name:"classes",type:"object",default:"",description:"Override or extend the styles applied to the component. See CSS API below for more details."},{name:"color",type:"'default'| 'inherit'| 'primary'| 'secondary'",default:"'default'",description:"The color of the component. It supports those theme colors that make sense for this component."},{name:"component",type:"elementType",default:"'button'",description:"The component used for the root node. Either a string to use a HTML element or a component."},{name:"disabled",type:"bool",default:"false",description:"If true, the button will be disabled."}],mdxType:"Props"}))}void 0!==p&&p&&p===Object(p)&&Object.isExtensible(p)&&!p.hasOwnProperty("__filemeta")&&Object.defineProperty(p,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"docs/components/button/button.en.mdx"}}),p.isMDXComponent=!0}}]);
//# sourceMappingURL=component---docs-components-button-button-en-mdx-6c2d6bfa408b7125a7bf.js.map