{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/buttons","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"59ccc263-569a-545b-add7-b731d97b681e","title":"Button","slug":"/contrast/react/components/buttons"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Button\",\n  \"metaTitle\": \"Button Component for Contrast Bootstrap React\",\n  \"metaDescription\": \"Building a Button Component using the Contrast Bootstrap React Package\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Button\"), mdx(\"p\", null, \"Buttons are components which trigger desirable user interactions. They are easy to customize in terms of size, shape and color.\"), mdx(\"h2\", null, \"Examples of Basic Contrast Styles For Buttons\"), mdx(\"p\", null, \"Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    className: \"btn btn-primary\"\n  }, \"Primary\"), mdx(\"button\", {\n    className: \"btn btn-secondary\"\n  }, \"Secondary\"), mdx(\"button\", {\n    className: \"btn btn-success\"\n  }, \"Success\"), mdx(\"button\", {\n    className: \"btn btn-danger\"\n  }, \"Danger\"), mdx(\"button\", {\n    className: \"btn btn-dark\"\n  }, \"Dark\"), mdx(\"button\", {\n    className: \"btn btn-warning\"\n  }, \"Warning\"), mdx(\"button\", {\n    className: \"btn btn-info\"\n  }, \"Info\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"primary\\\">Primary</CDBBtn>\\n          <CDBBtn color=\\\"secondary\\\">Secondary</CDBBtn>\\n          <CDBBtn color=\\\"success\\\">Success</CDBBtn>\\n          <CDBBtn color=\\\"danger\\\">Danger</CDBBtn>\\n          <CDBBtn color=\\\"dark\\\">Dark</CDBBtn>\\n          <CDBBtn color=\\\"warning\\\">Warning</CDBBtn>\\n          <CDBBtn color=\\\"info\\\">Info</CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Circular Buttons\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    className: \"btn btn-rounded btn-primary\"\n  }, \"Primary\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-secondary\"\n  }, \"Secondary\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-success\"\n  }, \"Success\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-danger\"\n  }, \"Danger\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-dark\"\n  }, \"Dark\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-warning\"\n  }, \"Warning\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-info\"\n  }, \"Info\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"primary\\\" circle>\\n            Primary\\n          </CDBBtn>\\n          <CDBBtn color=\\\"secondary\\\" circle>\\n            Secondary\\n          </CDBBtn>\\n          <CDBBtn color=\\\"success\\\" circle>\\n            Success\\n          </CDBBtn>\\n          <CDBBtn color=\\\"danger\\\" circle>\\n            Danger\\n          </CDBBtn>\\n          <CDBBtn color=\\\"dark\\\" circle>\\n            Dark\\n          </CDBBtn>\\n          <CDBBtn color=\\\"warning\\\" circle>\\n            Warning\\n          </CDBBtn>\\n          <CDBBtn color=\\\"info\\\" circle>\\n            Info\\n          </CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Outline Buttons\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    className: \"btn btn-outline-primary\"\n  }, \"Primary\"), mdx(\"button\", {\n    className: \"btn btn-outline-secondary\"\n  }, \"Secondary\"), mdx(\"button\", {\n    className: \"btn btn-outline-success\"\n  }, \"Success\"), mdx(\"button\", {\n    className: \"btn btn-outline-danger\"\n  }, \"Danger\"), mdx(\"button\", {\n    className: \"btn btn-outline-dark\"\n  }, \"Dark\"), mdx(\"button\", {\n    className: \"btn btn-outline-warning\"\n  }, \"Warning\"), mdx(\"button\", {\n    className: \"btn btn-outline-info\"\n  }, \"Info\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"primary\\\" outline>\\n            Primary\\n          </CDBBtn>\\n          <CDBBtn color=\\\"secondary\\\" outline>\\n            Secondary\\n          </CDBBtn>\\n          <CDBBtn color=\\\"success\\\" outline>\\n            Success\\n          </CDBBtn>\\n          <CDBBtn color=\\\"danger\\\" outline>\\n            Danger\\n          </CDBBtn>\\n          <CDBBtn color=\\\"dark\\\" outline>\\n            Dark\\n          </CDBBtn>\\n          <CDBBtn color=\\\"warning\\\" outline>\\n            Warning\\n          </CDBBtn>\\n          <CDBBtn color=\\\"info\\\" outline>\\n            Info\\n          </CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Circular Outline Buttons\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    className: \"btn btn-rounded btn-outline-primary\"\n  }, \"Primary\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-outline-secondary\"\n  }, \"Secondary\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-outline-success\"\n  }, \"Success\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-outline-danger\"\n  }, \"Danger\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-outline-dark\"\n  }, \"Dark\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-outline-warning\"\n  }, \"Warning\"), mdx(\"button\", {\n    className: \"btn btn-rounded btn-outline-info\"\n  }, \"Info\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"primary\\\" circle outline>\\n            Primary\\n          </CDBBtn>\\n          <CDBBtn color=\\\"secondary\\\" circle outline>\\n            Secondary\\n          </CDBBtn>\\n          <CDBBtn color=\\\"success\\\" circle outline>\\n            Success\\n          </CDBBtn>\\n          <CDBBtn color=\\\"danger\\\" circle outline>\\n            Danger\\n          </CDBBtn>\\n          <CDBBtn color=\\\"dark\\\" circle outline>\\n            Dark\\n          </CDBBtn>\\n          <CDBBtn color=\\\"warning\\\" circle outline>\\n            Warning\\n          </CDBBtn>\\n          <CDBBtn color=\\\"info\\\" outline circle>\\n            Info\\n          </CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Flat Buttons\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    className: \"btn btn-flat btn-primary\"\n  }, \"Primary\"), mdx(\"button\", {\n    className: \"btn btn-flat btn-secondary\"\n  }, \"Secondary\"), mdx(\"button\", {\n    className: \"btn btn-flat btn-success\"\n  }, \"Success\"), mdx(\"button\", {\n    className: \"btn btn-flat btn-danger\"\n  }, \"Danger\"), mdx(\"button\", {\n    className: \"btn btn-flat btn-dark\"\n  }, \"Dark\"), mdx(\"button\", {\n    className: \"btn btn-flat btn-warning\"\n  }, \"Warning\"), mdx(\"button\", {\n    className: \"btn btn-flat btn-info\"\n  }, \"Info\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"primary\\\" flat>\\n            Primary\\n          </CDBBtn>\\n          <CDBBtn color=\\\"secondary\\\" flat>\\n            Secondary\\n          </CDBBtn>\\n          <CDBBtn color=\\\"success\\\" flat>\\n            Success\\n          </CDBBtn>\\n          <CDBBtn color=\\\"danger\\\" flat>\\n            Danger\\n          </CDBBtn>\\n          <CDBBtn color=\\\"dark\\\" flat>\\n            Dark\\n          </CDBBtn>\\n          <CDBBtn color=\\\"warning\\\" flat>\\n            Warning\\n          </CDBBtn>\\n          <CDBBtn color=\\\"info\\\" flat>\\n            Info\\n          </CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Label at the side\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    style: {\n      \"width\": \"200px\"\n    },\n    className: \"btn text-right btn-primary\"\n  }, \"Primary\"), mdx(\"button\", {\n    style: {\n      \"width\": \"200px\"\n    },\n    className: \"btn text-right btn-secondary\"\n  }, \"Secondary\"), mdx(\"button\", {\n    style: {\n      \"width\": \"200px\"\n    },\n    className: \"btn text-right btn-success\"\n  }, \"Success\"), mdx(\"button\", {\n    style: {\n      \"width\": \"200px\"\n    },\n    className: \"btn text-left btn-dark\"\n  }, \"Dark\"), mdx(\"button\", {\n    style: {\n      \"width\": \"200px\"\n    },\n    className: \"btn text-left btn-warning\"\n  }, \" Warning \"), mdx(\"button\", {\n    style: {\n      \"width\": \"200px\"\n    },\n    className: \"btn text-left btn-info\"\n  }, \"Info\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"primary\\\" label=\\\"right\\\">Primary</CDBBtn>\\n          <CDBBtn color=\\\"secondary\\\" label=\\\"right\\\">Secondary</CDBBtn>\\n          <CDBBtn color=\\\"success\\\" label=\\\"right\\\">Success</CDBBtn>\\n          <CDBBtn color=\\\"dark\\\" label=\\\"left\\\">Dark</CDBBtn>\\n          <CDBBtn color=\\\"warning\\\" label=\\\"left\\\">Warning</CDBBtn>\\n          <CDBBtn color=\\\"info\\\" label=\\\"left\\\">Info</CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Large Button ending with Text\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    style: {\n      \"width\": \"300px\",\n      \"height\": \"100px\"\n    },\n    className: \"btn d-flex align-items-start justify-content-start btn-primary\"\n  }, \"Primary\"), mdx(\"button\", {\n    style: {\n      \"width\": \"300px\",\n      \"height\": \"100px\"\n    },\n    className: \"btn d-flex align-items-start justify-content-end btn-secondary\"\n  }, \"Secondary\"), mdx(\"button\", {\n    style: {\n      \"width\": \"300px\",\n      \"height\": \"100px\"\n    },\n    className: \"btn d-flex align-items-start justify-content-start btn-success\"\n  }, \"Success\"), mdx(\"button\", {\n    style: {\n      \"width\": \"300px\",\n      \"height\": \"100px\"\n    },\n    className: \"btn d-flex align-items-start justify-content-end btn-danger\"\n  }, \"Danger\"), mdx(\"button\", {\n    style: {\n      \"width\": \"300px\",\n      \"height\": \"100px\"\n    },\n    className: \"btn d-flex align-items-start justify-content-center btn-dark\"\n  }, \"Dark\"), mdx(\"button\", {\n    style: {\n      \"width\": \"300px\",\n      \"height\": \"100px\"\n    },\n    className: \"btn d-flex align-items-start justify-content-center btn-warning\"\n  }, \" Warning \"), mdx(\"button\", {\n    style: {\n      \"width\": \"300px\",\n      \"height\": \"100px\"\n    },\n    className: \"btn d-flex align-items-start justify-content-center btn-info\"\n  }, \"Info\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn size=\\\"xl\\\" color=\\\"primary\\\" endingText=\\\"top-left\\\">Primary</CDBBtn>\\n          <CDBBtn size=\\\"xl\\\" color=\\\"secondary\\\" endingText=\\\"top-right\\\">Secondary</CDBBtn>\\n          <CDBBtn size=\\\"xl\\\" color=\\\"success\\\" endingText=\\\"bottom-left\\\">Success</CDBBtn>\\n          <CDBBtn size=\\\"xl\\\" color=\\\"danger\\\" endingText=\\\"bottom-right\\\">Danger</CDBBtn>\\n          <CDBBtn size=\\\"xl\\\" color=\\\"dark\\\" endingText=\\\"top\\\">Dark</CDBBtn>\\n          <CDBBtn size=\\\"xl\\\" color=\\\"warning\\\" endingText=\\\"bottom\\\">Warning</CDBBtn>\\n          <CDBBtn size=\\\"xl\\\" color=\\\"info\\\" endingText=\\\"center\\\">Info</CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Block Button\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    className: \"btn btn-block btn-primary\"\n  }, \"Primary\"), mdx(\"button\", {\n    className: \"btn btn-block btn-secondary\"\n  }, \"Secondary\"), mdx(\"button\", {\n    className: \"btn btn-block btn-success\"\n  }, \"Success\"), mdx(\"button\", {\n    className: \"btn btn-block btn-danger\"\n  }, \"Danger\"), mdx(\"button\", {\n    className: \"btn btn-block btn-dark\"\n  }, \"Dark\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"primary\\\" block>\\n            Primary\\n          </CDBBtn>\\n          <CDBBtn color=\\\"secondary\\\" block>\\n            Secondary\\n          </CDBBtn>\\n          <CDBBtn color=\\\"success\\\" block>\\n            Success\\n          </CDBBtn>\\n          <CDBBtn color=\\\"danger\\\" block>\\n            Danger\\n          </CDBBtn>\\n          <CDBBtn color=\\\"dark\\\" block>\\n            Dark\\n          </CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Buttons with Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    className: \"btn btn-warning\"\n  }, mdx(\"i\", {\n    className: \"fa fa-magic\"\n  }), \"Warning\"), mdx(\"button\", {\n    className: \"btn btn-info\"\n  }, \"Info\", mdx(\"i\", {\n    className: \"fa fa-magic\"\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"warning\\\">\\n            <CDBIcon icon=\\\"magic\\\" className=\\\"ml-1\\\" />\\n            Warning\\n          </CDBBtn>\\n          <CDBBtn color=\\\"info\\\">\\n            Info\\n            <CDBIcon icon=\\\"magic\\\" className=\\\"mr-1\\\" />\\n          </CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Button Sizes\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    className: \"btn btn-lg btn-primary\"\n  }, \"Large Button\"), mdx(\"button\", {\n    className: \"btn btn-md btn-secondary\"\n  }, \"Normal Button\"), mdx(\"button\", {\n    className: \"btn btn-sm btn-success\"\n  }, \"Small Button\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"primary\\\" size=\\\"large\\\">\\n            Large button\\n          </CDBBtn>\\n          <CDBBtn color=\\\"secondary\\\">Normal button</CDBBtn>\\n          <CDBBtn color=\\\"success\\\" size=\\\"small\\\">\\n            Small button\\n          </CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Disabled Buttons\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    className: \"btn btn-secondary disabled\"\n  }, \"Disabled Button\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Button = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtn color=\\\"secondary\\\" disabled>\\n            Disabled Button\\n          </CDBBtn>\\n    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Button component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast Button Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast Button component first before using it. Import the Icon component if you need Icons.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBBtn, CDBIcon } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Button Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBBtn component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"action\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"btn-action\"), \" class, works with Cards\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn action ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"active\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds active class\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn active ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"block\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Create block level buttons\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn block ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"circle\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"btn-circle\"), \" class, works with stepper\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn circle ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn className=\\\"custom-class\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"primary\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Determines button color, accepts CDB predefined color classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn color=\\\"secondary\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"disabled\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Disables button from being clicked\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn disabled ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"download\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds download attribute with provided url\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn download=\\\"https://link_to_your_file.com\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"endingText\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Positions the button text in one of the selected positions. These positions include \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top-left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top-right\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom-left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom-right\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn endingText=\\\"center\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"flat\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds flat effect to button. That is button without background and borders\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn flat ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"innerRef\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Allows to pass Ref string, which will attach to rendered button or a DOM element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn innerRef=\\\"buttonRef\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"label\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Positions button text \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn label=\\\"left\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"onClick\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Will call a function when the button is clicked\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn onClick={yourFunction} ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"role\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds role attribute to button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn role=\\\"....\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"size\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"medium\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Determines button size, available values: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"[small, large]\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn size=\\\"large\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"social\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds a social media icon.\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn social=\\\"fb\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn tag=\\\"a\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"target\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"_self\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"If used as link, sets target attribute\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn href=\\\"...\\\" target=\\\"_blank\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"type\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds type attribute to button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtn type=\\\"submit\\\" ... />\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#button","title":"Button","items":[{"url":"#examples-of-basic-contrast-styles-for-buttons","title":"Examples of Basic Contrast Styles For Buttons"},{"url":"#circular-buttons","title":"Circular Buttons"},{"url":"#outline-buttons","title":"Outline Buttons"},{"url":"#circular-outline-buttons","title":"Circular Outline Buttons"},{"url":"#flat-buttons","title":"Flat Buttons"},{"url":"#label-at-the-side","title":"Label at the side"},{"url":"#large-button-ending-with-text","title":"Large Button ending with Text"},{"url":"#block-button","title":"Block Button"},{"url":"#buttons-with-icons","title":"Buttons with Icons"},{"url":"#button-sizes","title":"Button Sizes"},{"url":"#disabled-buttons","title":"Disabled Buttons"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-button-import-statement","title":"Contrast Button Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/buttons.mdx"},"frontmatter":{"metaTitle":"Button Component for Contrast Bootstrap React","metaDescription":"Building a Button Component using the Contrast Bootstrap React Package"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"59ccc263-569a-545b-add7-b731d97b681e"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}