{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/buttonGroup","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"65f0edd7-3556-5dbd-8c54-3accd080ee4d","title":"ButtonGroup","slug":"/contrast/react/components/buttonGroup"},"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\": \"ButtonGroup\",\n  \"metaTitle\": \"ButtonGroup Component for Contrast Bootstrap React\",\n  \"metaDescription\": \"Building a ButtonGroup 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, \"ButtonGroup\"), mdx(\"p\", null, \"Buttons are components which are triggering a desirable user interaction. Easy to customize in terms of size, shape, and color.\"), mdx(\"p\", null, \"Examples of Bootstrap button group use:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Group of pricing options\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Group of licenses you can purchase on our CDB Pro page\")), mdx(\"h2\", null, \"Multicolored Button Groups\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-primary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-secondary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-success\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-danger\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-dark\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-warning\"\n  }, \"Click me\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtnGrp, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst ButtonGroup = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtnGrp size=\\\"lg\\\">\\n            <CDBBtn color=\\\"primary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"secondary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"success\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"danger\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"dark\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"warning\\\">click me</CDBBtn>\\n          </CDBBtnGrp>\\n    </CDBContainer>\\n  );\\n  export default ButtonGroup;\\n};\\n\")), mdx(\"h2\", null, \"Rect Secondary Medium with Space Between\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"mb-2\"\n  }, mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-primary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-secondary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-success\"\n  }, \"Click me\")), mdx(\"div\", null, mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-danger\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-dark\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-warning\"\n  }, \"Click me\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtnGrp, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst ButtonGroup = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtnGrp>\\n            <CDBBtn color=\\\"primary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"secondary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"success\\\">click me</CDBBtn>\\n          </CDBBtnGrp>\\n          <CDBBtnGrp>\\n            <CDBBtn color=\\\"danger\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"dark\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"warning\\\">click me</CDBBtn>\\n          </CDBBtnGrp>\\n    </CDBContainer>\\n  );\\n  export default ButtonGroup;\\n};\\n\")), mdx(\"h2\", null, \"Rect Secondary Small\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm m-0 btn-primary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm m-0 btn-secondary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm m-0 btn-success\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm m-0 btn-danger\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm m-0 btn-dark\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm m-0 btn-warning\"\n  }, \"Click me\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtnGrp, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst ButtonGroup = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtnGrp size=\\\"sm\\\">\\n            <CDBBtn color=\\\"primary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"secondary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"success\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"danger\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"dark\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"warning\\\">click me</CDBBtn>\\n          </CDBBtnGrp>\\n    </CDBContainer>\\n  );\\n  export default ButtonGroup;\\n};\\n\")), mdx(\"h2\", null, \"Vertical Rect Secondary Large\"), mdx(\"p\", null, \"Make a set of buttons appear vertically stacked rather than horizontally.\"), mdx(\"div\", {\n    className: \"container btn-group-vertical\"\n  }, mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-lg btn-primary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-lg btn-secondary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-lg btn-success\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-lg btn-danger\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-lg btn-dark\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-lg btn-warning\"\n  }, \"Click me\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtnGrp, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst ButtonGroup = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtnGrp vertical size=\\\"lg\\\">\\n            <CDBBtn color=\\\"primary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"secondary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"success\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"danger\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"dark\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"warning\\\">click me</CDBBtn>\\n          </CDBBtnGrp>\\n    </CDBContainer>\\n  );\\n  export default ButtonGroup;\\n};\\n\")), mdx(\"h2\", null, \"Vertical Rect Secondary Medium\"), mdx(\"p\", null, \"Make a set of buttons appear vertically stacked rather than horizontally.\"), mdx(\"div\", {\n    className: \"container btn-group-vertical\"\n  }, mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-md btn-primary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-md btn-secondary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-md btn-success\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-md btn-danger\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-md btn-dark\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-md btn-warning\"\n  }, \"Click me\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtnGrp, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst ButtonGroup = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtnGrp vertical>\\n            <CDBBtn color=\\\"primary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"secondary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"success\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"danger\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"dark\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"warning\\\">click me</CDBBtn>\\n          </CDBBtnGrp>\\n    </CDBContainer>\\n  );\\n  export default ButtonGroup;\\n};\\n\")), mdx(\"h2\", null, \"Vertical Rect Secondary Small\"), mdx(\"p\", null, \"Make a set of buttons appear vertically stacked rather than horizontally.\"), mdx(\"div\", {\n    className: \"container btn-group-vertical\"\n  }, mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm btn-primary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm btn-secondary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm btn-success\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm btn-danger\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm btn-dark\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn btn-sm btn-warning\"\n  }, \"Click me\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtnGrp, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst ButtonGroup = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtnGrp vertical size=\\\"sm\\\">\\n            <CDBBtn color=\\\"primary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"secondary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"success\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"danger\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"dark\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"warning\\\">click me</CDBBtn>\\n          </CDBBtnGrp>\\n    </CDBContainer>\\n  );\\n  export default ButtonGroup;\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Button Group with Icon\"), 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    type: \"button\",\n    className: \"btn m-0 btn-sm btn-primary\"\n  }, mdx(\"i\", {\n    className: \"fab fa-twitter\"\n  })), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-sm btn-secondary\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook-f\"\n  })), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-sm btn-success\"\n  }, mdx(\"i\", {\n    className: \"fab fa-reddit\"\n  })), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-sm btn-danger\"\n  }, mdx(\"i\", {\n    className: \"fab fa-instagram\"\n  })), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-sm btn-dark\"\n  }, mdx(\"i\", {\n    className: \"fab fa-imdb\"\n  })), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-sm btn-warning\"\n  }, mdx(\"i\", {\n    className: \"fab fa-stack-overflow\"\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtnGrp, CDBBtn, Icon, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst ButtonGroup = () => {\\n  return (\\n   <CDBContainer>\\n         <CDBBtnGrp>\\n            <CDBBtn color=\\\"primary\\\"><CDBIcon fab icon=\\\"twitter\\\"/></CDBBtn>\\n            <CDBBtn color=\\\"secondary\\\"><CDBIcon fab icon=\\\"facebook\\\"/></CDBBtn>\\n            <CDBBtn color=\\\"success\\\"><CDBIcon fab icon=\\\"reddit\\\"/></CDBBtn>\\n            <CDBBtn color=\\\"danger\\\"><CDBIcon fab icon=\\\"instagram\\\"/></CDBBtn>\\n            <CDBBtn color=\\\"dark\\\"><CDBIcon fab icon=\\\"imdb\\\"/></CDBBtn>\\n            <CDBBtn color=\\\"warning\\\"><CDBIcon fab icon=\\\"stack-overflow\\\"/></CDBBtn>\\n          </CDBBtnGrp>\\n    </CDBContainer>\\n  );\\n  export default ButtonGroup;\\n};\\n\")), mdx(\"h2\", null, \"Button Group with Dropdown\"), mdx(\"p\", null, \"Use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBDropDown\"), \" component to add dropdowns to Button Groups.\"), mdx(\"div\", {\n    className: \"container d-flex\"\n  }, mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-md btn-primary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-md btn-secondary\"\n  }, \"Click me\"), mdx(\"button\", {\n    type: \"button\",\n    className: \"btn m-0 btn-md btn-success\"\n  }, \"Click me\"), mdx(\"div\", {\n    className: \"dropdown\"\n  }, mdx(\"button\", {\n    className: \"btn m-0 btn-warning text-dark dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Dropdown\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"a\", {\n    className: \"dropdown-item\",\n    href: \"#\"\n  }, \"Action\")), mdx(\"li\", null, mdx(\"a\", {\n    className: \"dropdown-item\",\n    href: \"#\"\n  }, \"Another action\")), mdx(\"li\", null, mdx(\"a\", {\n    className: \"dropdown-item\",\n    href: \"#\"\n  }, \"Something else here\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBtnGrp, CDBIcon, CDBBtn, CDBDropDown, CDBDropDownToggle, CDBDropDownMenu, CDBDropDownItem, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst ButtonGroup = () => {\\n  return (\\n    <CDBContainer>\\n          <CDBBtnGrp>\\n            <CDBBtn color=\\\"primary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"secondary\\\">click me</CDBBtn>\\n            <CDBBtn color=\\\"success\\\">click me</CDBBtn>\\n          </CDBBtnGrp>\\n          <CDBBtnGrp>\\n            <CDBDropDown>\\n              <CDBDropDownToggle color=\\\"warning\\\">Dropdown<Icon fas icon=\\\"caret-down\\\"/></CDBDropDownToggle>\\n              <CDBDropDownMenu dropright>\\n                <CDBDropDownItem>Action 1</CDBDropDownItem>\\n                <CDBDropDownItem>Action 2</CDBDropDownItem>\\n              </CDBDropDownMenu>\\n            </CDBDropDown>\\n          </CDBBtnGrp>\\n    </CDBContainer>\\n  );\\n  export default ButtonGroup;\\n};\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the ButtonGroup 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 ButtonGroup Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast ButtonGroup component first before using it. Then import any other needed components.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBBtnGrp, Icon, CDBBtn, CDBDropDown, CDBDropDownToggle, CDBDropDownMenu, CDBDropDownItem, CDBContainer } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast ButtonGroup Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBBtnGrp 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  }), \"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  }), \"<CDBBtnGrp className=\\\"myClass\\\" ... />\")), 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  }), \"group\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Change default component's role\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtnGrp role=\\\"group\\\" ... />\")), 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 buttons size, available values: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"[sm, lg]\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtnGrp size=\\\"lg\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"vertical\"), 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  }), \"Changes group orientation to vertical\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBBtnGrp vertical .../>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#buttongroup","title":"ButtonGroup","items":[{"url":"#multicolored-button-groups","title":"Multicolored Button Groups"},{"url":"#rect-secondary-medium-with-space-between","title":"Rect Secondary Medium with Space Between"},{"url":"#rect-secondary-small","title":"Rect Secondary Small"},{"url":"#vertical-rect-secondary-large","title":"Vertical Rect Secondary Large"},{"url":"#vertical-rect-secondary-medium","title":"Vertical Rect Secondary Medium"},{"url":"#vertical-rect-secondary-small","title":"Vertical Rect Secondary Small"},{"url":"#button-group-with-icon","title":"Button Group with Icon"},{"url":"#button-group-with-dropdown","title":"Button Group with Dropdown"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-buttongroup-import-statement","title":"Contrast ButtonGroup Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/buttonGroup.mdx"},"frontmatter":{"metaTitle":"ButtonGroup Component for Contrast Bootstrap React","metaDescription":"Building a ButtonGroup 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":"65f0edd7-3556-5dbd-8c54-3accd080ee4d"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}