{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/buttonGroup","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"5ac01696-7b33-5295-882f-521326763f26","title":"ButtonGroup","slug":"/contrast/angular/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 Angular\",\n  \"metaDescription\": \"Angular Bootstrap Buttons are components that trigger wanted user interactions\"\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, \"Angular Bootstrap ButtonGroup are components that trigger wanted user interactions. Angular Bootstrap Contrast ButtonGroups are easy to customize in terms of their size, shape and color.\"), mdx(\"p\", null, \"Examples of Angular 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(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"818px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/6dd06c6b131dc9384a1c36ec466ea1e8/64d87/buttongroup1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"11.96911196911197%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAArUlEQVQI1wGiAF3/AM7d+v9+p/X/g634/4ml7v+untj/sZ7c/6Ofz/9wvpr/b8Ob/3S7lf/Zg3H/8Xtu//B5av+GbGn/aW9v/2ZlaP/IwJP///Su//nrpP/89tP/ALzQ9/9Uiu7/X5Ty/2KG5P+Rfcn/mYDP/4N/vP9Bpnj/RbB9/0mjcv/IWUL/6VRE/+dQPf9cOjX/PkZF/zk4PP+xpmv/+eeN/+zafv/48ML/9mxxTxJvBEgAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/6dd06c6b131dc9384a1c36ec466ea1e8/64d87/buttongroup1.png\",\n    \"srcSet\": [\"/static/6dd06c6b131dc9384a1c36ec466ea1e8/a2ead/buttongroup1.png 259w\", \"/static/6dd06c6b131dc9384a1c36ec466ea1e8/6b9fd/buttongroup1.png 518w\", \"/static/6dd06c6b131dc9384a1c36ec466ea1e8/64d87/buttongroup1.png 818w\"],\n    \"sizes\": \"(max-width: 818px) 100vw, 818px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\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\")), mdx(\"h2\", null, \"Rect Secondary Medium with Space Between\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"702px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f1424736c0fb9e505654eeb722d75015/d6331/buttongroup2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"15.83011583011583%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABJ0AAASdAHeZh94AAAA7klEQVQI1wXBu07CUACA4bMoDr6Eo5PxHXQycWUn0U0HXH0DRxMvEbBh0OjCZNSkC2IvGGUAjQXJyTEwWC2hFLz0Qn+/T8RJSlPFNGRMU4aojo9yRrSli/3xitF/QU08GHh812tETxbywebesjAME89tw7RHGr6TTv8QX6OI5Z0hi/mApY0++azObtZkLXdI5mgdsbfK1uMZ6XkZZ14wWJgjNyMQsxmEEJT3V8Ddxu9sEv+8IX7DhIo55tIYU7kbYuiKut7jtvrMaeuGk8YVttslkV0+tQOCC42qVuC4VKJYKOK0rokCk4lXI4l8/gGS/70EqeCBbgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/f1424736c0fb9e505654eeb722d75015/d6331/buttongroup2.png\",\n    \"srcSet\": [\"/static/f1424736c0fb9e505654eeb722d75015/a2ead/buttongroup2.png 259w\", \"/static/f1424736c0fb9e505654eeb722d75015/6b9fd/buttongroup2.png 518w\", \"/static/f1424736c0fb9e505654eeb722d75015/d6331/buttongroup2.png 702w\"],\n    \"sizes\": \"(max-width: 702px) 100vw, 702px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\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\")), mdx(\"h2\", null, \"Rect Secondary Small\"), mdx(\"p\", null, \"Simply add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" boolean attribute to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBButtonGroup\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"598px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/8db38e6bba0773b65b027c6dfd4d0985/0c69d/buttongroup3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"17.374517374517374%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABJ0AAASdAHeZh94AAAAvUlEQVQI12P4DwRn7vz8nznz8/+ced/+N054+H9J78X/C7qv/M9YOvt/8K62/9EbWv6fzw3//y0l+P+pWL//4cFB/718Av93NKX///Nm1v+vTyf+//X5LMio/wwg4tqjH/+71r7/37Px4/85yx7+37rk2v9Ni2/879y27n/V0QX/G/fO+3+lp+b/x/bq/xcay//XVlX+Lymt/L9wbsf/Ly/W/H/3aOn/75+uQQz89+/ffwj4B8W4wT8CYiCzACieyYyyTwMTAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/8db38e6bba0773b65b027c6dfd4d0985/0c69d/buttongroup3.png\",\n    \"srcSet\": [\"/static/8db38e6bba0773b65b027c6dfd4d0985/a2ead/buttongroup3.png 259w\", \"/static/8db38e6bba0773b65b027c6dfd4d0985/6b9fd/buttongroup3.png 518w\", \"/static/8db38e6bba0773b65b027c6dfd4d0985/0c69d/buttongroup3.png 598w\"],\n    \"sizes\": \"(max-width: 598px) 100vw, 598px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\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\")), mdx(\"h2\", null, \"Vertical Rect Secondary Large\"), mdx(\"p\", null, \"Make a set of buttons appear vertically stacked rather than horizontally.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"191px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/83414c03975f8e165c6d33bd4c19b838/c540e/buttongroup4.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"183.24607329842934%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,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')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/83414c03975f8e165c6d33bd4c19b838/c540e/buttongroup4.png\",\n    \"srcSet\": [\"/static/83414c03975f8e165c6d33bd4c19b838/c540e/buttongroup4.png 191w\"],\n    \"sizes\": \"(max-width: 191px) 100vw, 191px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"  <CDBBtnGrp [vertical]=true 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\")), mdx(\"h2\", null, \"Vertical Rect Secondary Medium\"), mdx(\"p\", null, \"Make a set of buttons appear vertically stacked rather than horizontally.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"163px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/32baf70643aed61f8d429c0bc47289f2/222b7/buttongroup5.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"220.8588957055215%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,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')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/32baf70643aed61f8d429c0bc47289f2/222b7/buttongroup5.png\",\n    \"srcSet\": [\"/static/32baf70643aed61f8d429c0bc47289f2/222b7/buttongroup5.png 163w\"],\n    \"sizes\": \"(max-width: 163px) 100vw, 163px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"  <CDBBtnGrp [vertical]=true>\\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\")), mdx(\"h2\", null, \"Vertical Rect Secondary Small\"), mdx(\"p\", null, \"Make a set of buttons appear vertically stacked rather than horizontally.\"), mdx(\"p\", null, \"Simply add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" boolean attribute to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBButtonGroup\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"147px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/33b0b46eedf63bbe54ef08077417bafb/a70ce/buttongroup6.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"168.02721088435376%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAiCAYAAABfqvm9AAAACXBIWXMAABJ0AAASdAHeZh94AAAFNklEQVRIx52WaVBTVxiGL8GEYlAsrbhVbR0LnRbbqtDRahdxqSg7JgSrI7sQFBSitqN0rEOQCtIZZyoYoHWpo+2P9oe2RaFVq4iFBFkckcGwSIAQNSSYVFlu3p57cwUEE6SZee/7ne0538m5c+6hwP0sFsugj1fDx1NDEDb4X8DhUGrkDIzR4xA3bHSG5Mk1Mo8Bov4XFD06Q0Y0B23RPkZErhFh2USHjNiQzcXZ1piRKMcI8WEj/DONuFxnZsfR9EggbQXWqo2YJ+3GtBgD5iUZMSvegNkJRFsNmBFnwEwipo2J3SINOHNZz65ogLaRYZ26Gwt26hGU9QjSH8yQKsyIyzMhKd+ENQd6kFhowtZjpKwwYb7UgJ+uPGSXbhNYqzbAY4cRy/ab4Ss3YaXcjNXEVxwwYdGXj+CdbsKnpByUY8bMxB6cvaK3D7zV+BAfJTbDO7oFPjHNWBxNYs4/iLXKm6t7b0szfr2kZZc86j+00NadUt/pxBfhpZCFlGB3WAl2MQrlROK04ItsG1Pe4X8B14obuU2x2AA2aJEW8RfSY8uQu0+FrNQKfCMj2lmOvVFXkbOnEpkpN5CzqwLbg0vx94W79oFNBCiTXMLhXZU4Kq+GIqMWR/dXQXGgCvKkcnxLJsnPrEXRwRqkBL0AkM0wnCxHVIpUoh0bSpAqLkUys0QSM54cepGtkwYU2wbS3Nte3dKIuVnxmCaPwtSMyCHPjMZ0Ind5JOszD8bA9etNOP3Pn+y4AQs9EkizDcp79RDkBYLKWw/34xsxsSAUk4tEEBYEg5fnD9fCDRDkB8DpWBCoI74ovPmbfWDVvTtwORKK5WdlkPyRjYjzORCfy8Dn5/ZjwckEhJyTQ3z+EOKKc+GYuxbfq34fI8O2BlAKEQTHN0N4MhIuJ6PhcmILJpIyr0gCisj5RCSmnIoC9d06KKqL7QPr796Cf/JSrJQuwirp4kFntCbJG59t82Hj1cQ/ifPC+Su/sONoemDkLtPswaW/qUTnDB50kynoXqbQNYW4K3FXa9zlQjTJWtY6k7ZTBexhhwEbwIc1KqjnCNC6cBbawz6GZvViaNZ6Q7PyLbR4TYXGfwnaVnhBs2Yh1GTCztOF9oF6AmydzYd21fvoCveFLnw9dCHLoQv9EB0+c6D184ZO4ocHW/xxj2Ss/dEKtNgCPqhW4jYB1r9CoX4qhdvD/PZTdyN6lYgsvZ1kSD8PSNPWTalRKuHhzMccBwqvURTrsxnnUXjdkcSkPJf4GwIe3En9maJC6y7bAlYSIMUXgCKdXadNxwShEIJJrhAInUE58Ii7gHJ0BDWBz/ZRFI4BrKpSwfklJyxbugSiTRJEhG9CWHAAIsL88M7bnggRhyFcEoGozRtZYNFYGVZUKtmOFOUER74QDjwh+AKSFcXn6okcJkLo4sbGeXkK+8CGO7XYLH4XooD5EAe+CVHgfC72gCTYE5IgT67eA6Hr5uJi8c/Pf7HZI4jYI0MTYNwHPOb0JH0o/ncv0Jturev9inSWwawvQ18/Br/PQ0CLFWjUq9HXvhv6hm1Ql8WiVRmPNtVWtKgS0dOYjKYbcdBUJaC9Woo+zXYYdVfRPzAGkNbuQUd1AprK43G3PIaFqCsS0N2QDI0qgUwUg7pLMaA7U9Bz/xr67AF7upvQ3yEDtDth6UoDdGmwaFOfcdxn6mWwdGwjQBsZPr2Bmc1GaNsqoGkue0ZtI8qa5uvoaL2OHoMW9LCb26jrHPNt6O0je/CEHlNPei3kA88lY+s6Z719jVdD4/8DwvV6ORqnR+UAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/33b0b46eedf63bbe54ef08077417bafb/a70ce/buttongroup6.png\",\n    \"srcSet\": [\"/static/33b0b46eedf63bbe54ef08077417bafb/a70ce/buttongroup6.png 147w\"],\n    \"sizes\": \"(max-width: 147px) 100vw, 147px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"  <CDBBtnGrp [vertical]=true 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\")), mdx(\"i\", null), mdx(\"h2\", null, \"Button Group with Icon\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"363px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1783d2cf15aa163d4fd68de923f91085/4e786/buttongroup7.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"28.185328185328185%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABJ0AAASdAHeZh94AAABjElEQVQY053M3yvdcRzH8c/duXE5zY3paMsiX9PKxbJS58aPslp+5FahdnFwRmflRm6G4mKdxJZ8z/xYTZIY2SGWJEluhMPmR5n8Kt86h/P9fr4/nr5b8gd41aPn++otLNtBmvY9U1pIl2laGKZEd/2rJQ1sQ3cZSJeu6xhuLUtiWya2beI4DqJ3Ns7rFo3i9hjVrYd0BZbpfr/Oh5YfvBzyk/PNzyv1Hatv8jgvyObYp1Ccq/BcUcjKzOLXVAD0EPK0A3lzhGhWNXxtMWq/6GSXbdHpX2as5w/lVSpJoTICKyqPu0qIPPOgleZzlJFEihDUNDbx1OtlrL+QxEE9V9E6zOsoIhjWSK3TUIJxXlRuE6yI0Fa9yttKFdFdRNpgDZ6PPiJpgvMnHvYfCZLdhynedITb8YFCOGvger8WI76D2NiLEY5cMLJ4yeTCX5Zmdlmc2mNufhN1fYaetQm+rk3zezTMabiXk+F+vqsDfAqF6Ov7THTzJwltBe1sCSNxheD/nDsPm2WDfXffAoxEcyneQQOxAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/1783d2cf15aa163d4fd68de923f91085/4e786/buttongroup7.png\",\n    \"srcSet\": [\"/static/1783d2cf15aa163d4fd68de923f91085/a2ead/buttongroup7.png 259w\", \"/static/1783d2cf15aa163d4fd68de923f91085/4e786/buttongroup7.png 363w\"],\n    \"sizes\": \"(max-width: 363px) 100vw, 363px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \" <CDBBtnGrp>\\n    <CDBBtn color=\\\"primary\\\"><CDBIcon [fab]=true icon=\\\"twitter\\\"/></CDBBtn>\\n    <CDBBtn color=\\\"secondary\\\"><CDBIcon [fab]=true icon=\\\"facebook\\\"/></CDBBtn>\\n    <CDBBtn color=\\\"success\\\"><CDBIcon [fab]=true icon=\\\"reddit\\\"/></CDBBtn>\\n    <CDBBtn color=\\\"danger\\\"><CDBIcon [fab]=true icon=\\\"instagram\\\"/></CDBBtn>\\n    <CDBBtn color=\\\"dark\\\"><CDBIcon [fab]=true icon=\\\"imdb\\\"/></CDBBtn>\\n    <CDBBtn color=\\\"warning\\\"><CDBIcon [fab]=true icon=\\\"stack-overflow\\\"/></CDBBtn>\\n  </CDBBtnGrp>\\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(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"793px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/8d8647523dc6448c6375dcc05f8419b5/73fd0/buttongroup8.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"18.532818532818535%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABJ0AAASdAHeZh94AAAA6ElEQVQY052OsUrDUABFs/kjbiL+iH6Ag4M4qSg4iJOTH+Ds6C+4iRic6lDUFy1F24ZEsPTZWtLG5KXJe3nH17o5euGM99zrBZHmKTK8hor3zoS4M0V8RDQGbcQwRNc1tupjyxCqaIGd9bA64W+stXhrR2NWjr9Z325xuuVzsnnH8tkBSxcbrF7u8pXnMDon7e6QvO2j4kPq/h5Vcu3GIMtSslxRaU3txj0/yLl9Vtw/jGk1B7w0JTdtwVWvgR8LSmPQeRc1eXQIimlAmQr0TDoBSCn5HI7Q2vw+5J9xXSc0FEWxYP5uzg9hCSNFbIX6VQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/8d8647523dc6448c6375dcc05f8419b5/73fd0/buttongroup8.png\",\n    \"srcSet\": [\"/static/8d8647523dc6448c6375dcc05f8419b5/a2ead/buttongroup8.png 259w\", \"/static/8d8647523dc6448c6375dcc05f8419b5/6b9fd/buttongroup8.png 518w\", \"/static/8d8647523dc6448c6375dcc05f8419b5/73fd0/buttongroup8.png 793w\"],\n    \"sizes\": \"(max-width: 793px) 100vw, 793px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\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 class=\\\"ml-2\\\">\\n    <CDBDropDown>\\n        <CDBDropDownToggle color=\\\"warning\\\" [caretDropRight]=true (click)=\\\"menu.toggleDropdown($event)\\\">Dropdown\\n            <!-- <CDBIcon [fas]=true icon=\\\"caret-down\\\"></CDBIcon> -->\\n        </CDBDropDownToggle>\\n        <CDBDropDownMenu #menu=\\\"cdbDropdownMenu\\\" placement=\\\"right\\\">\\n            <CDBDropDownItem>Action 1</CDBDropDownItem>\\n            <CDBDropDownItem>Action 2</CDBDropDownItem>\\n        </CDBDropDownMenu>\\n    </CDBDropDown>\\n</CDBBtnGrp>\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.\"), mdx(\"h2\", null, \"Contrast Button Group Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {ButtongroupModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Button Group Bootstrap Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Button Group 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  }), \"class\"), 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  }), \"class=\\\"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  }), \"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  }), \"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  }), \"[vertical]\", \"=true\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#buttongroup","title":"ButtonGroup","items":[{"url":"#multicolored-button-groups","title":"Multicolored Button Groups","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#rect-secondary-medium-with-space-between","title":"Rect Secondary Medium with Space Between","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#rect-secondary-small","title":"Rect Secondary Small","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#vertical-rect-secondary-large","title":"Vertical Rect Secondary Large","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#vertical-rect-secondary-medium","title":"Vertical Rect Secondary Medium","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]},{"url":"#vertical-rect-secondary-small","title":"Vertical Rect Secondary Small","items":[{"items":[{"items":[{"items":[{"url":"#html-5","title":"html"}]}]}]}]},{"url":"#button-group-with-icon","title":"Button Group with Icon","items":[{"items":[{"items":[{"items":[{"url":"#html-6","title":"html"}]}]}]}]},{"url":"#button-group-with-dropdown","title":"Button Group with Dropdown","items":[{"items":[{"items":[{"items":[{"url":"#html-7","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-button-group-bootstrap-modules-used","title":"Contrast Button Group Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/components/buttonGroup.md"},"frontmatter":{"metaTitle":"ButtonGroup Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap Buttons are components that trigger wanted user interactions"}},"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":"5ac01696-7b33-5295-882f-521326763f26"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}