{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/buttons","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"ea50385f-1ab1-5cc7-ba5a-bb97912b7bd1","title":"Button","slug":"/contrast/angular/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 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, \"Button\"), mdx(\"p\", null, \"Angular Bootstrap Buttons are components that trigger wanted user interactions. They are easy to customize in terms of their 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(\"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\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1cb8496d92e9130237e1dc2b00a97e22/baa75/buttonbasic.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.583011583011583%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAnUlEQVQI1xXMvQ7BUACA0b6uoYnJYDBI9AmYDExiEo1VdDAQRGJqDBJtFy4Nddve/tz2w3DWY8w2ivYkZrl9sxi7rOwr/aNNYz3k5MyRrQb30YCuZWGaTYKLA9GUR7inszvTO7i8VUaeZeiqwpBpxfOjSVJNHOUkccFLSUQakaWSUtwIAw/P9xFCUOQJdfmh1Iqnygl//pHWmrqu+QKs/I4aaBK3AwAAAABJRU5ErkJggg==')\",\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/1cb8496d92e9130237e1dc2b00a97e22/e3189/buttonbasic.png\",\n    \"srcSet\": [\"/static/1cb8496d92e9130237e1dc2b00a97e22/a2ead/buttonbasic.png 259w\", \"/static/1cb8496d92e9130237e1dc2b00a97e22/6b9fd/buttonbasic.png 518w\", \"/static/1cb8496d92e9130237e1dc2b00a97e22/e3189/buttonbasic.png 1035w\", \"/static/1cb8496d92e9130237e1dc2b00a97e22/44d59/buttonbasic.png 1553w\", \"/static/1cb8496d92e9130237e1dc2b00a97e22/baa75/buttonbasic.png 1746w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\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  }), \"<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<CDBBtn color=\\\"white\\\">White</CDBBtn>\\n<CDBBtn color=\\\"light\\\">Light</CDBBtn>\\n\")), mdx(\"h2\", null, \"Circular Buttons\"), 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\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/89fbcc53e875d0e2fe14c231813df551/7792f/buttoncircle.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\": \"10.81081081081081%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAlklEQVQI1w3FPQ/BQBzAYR+YhUHEYrf0C9iko5HJIMQikiaiITE5k/RFX/Tuevfvj+HJ09vHlmlYc7x82YR3DusXy+uWwWHB7byjmPQpViHzIGA0HJO/IyQLKcuY2elBEN1pncNojYjQ07YjrwVthKZu0V9HZRtSXWFNg0sTEvVEKUWaZnhnEFfhvSU3LZ8/6TrEe7r/P3Kvj+DBQJxyAAAAAElFTkSuQmCC')\",\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/89fbcc53e875d0e2fe14c231813df551/e3189/buttoncircle.png\",\n    \"srcSet\": [\"/static/89fbcc53e875d0e2fe14c231813df551/a2ead/buttoncircle.png 259w\", \"/static/89fbcc53e875d0e2fe14c231813df551/6b9fd/buttoncircle.png 518w\", \"/static/89fbcc53e875d0e2fe14c231813df551/e3189/buttoncircle.png 1035w\", \"/static/89fbcc53e875d0e2fe14c231813df551/44d59/buttoncircle.png 1553w\", \"/static/89fbcc53e875d0e2fe14c231813df551/7792f/buttoncircle.png 1761w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\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  }), \"<CDBBtn color=\\\"primary\\\" [circle]=true>\\n    Primary\\n</CDBBtn>\\n<CDBBtn color=\\\"secondary\\\" [circle]=true>\\n    Secondary\\n</CDBBtn>\\n<CDBBtn color=\\\"success\\\" [circle]=true>\\n    Success\\n</CDBBtn>\\n<CDBBtn color=\\\"danger\\\" [circle]=true>\\n    Danger\\n</CDBBtn>\\n<CDBBtn color=\\\"dark\\\" [circle]=true>\\n    Dark\\n</CDBBtn>\\n<CDBBtn color=\\\"warning\\\" [circle]=true>\\n    Warning\\n</CDBBtn>\\n<CDBBtn color=\\\"info\\\" [circle]=true>\\n    Info\\n</CDBBtn>\\n<CDBBtn color=\\\"white\\\" [circle]=true>\\n    White\\n</CDBBtn>\\n<CDBBtn color=\\\"light\\\" [circle]=true>\\n    Light\\n</CDBBtn>\\n\")), mdx(\"h2\", null, \"Outline Buttons\"), 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\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f2280473790358eb93b6ad88e26cf406/7f15f/buttonoutline.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\": \"6.563706563706565%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAABJ0AAASdAHeZh94AAAAQklEQVQI1xXJSRLAIAgAwfz/rSlFBRGXmphDn/rxOGTdyNVtojUwDcSV5A11Y6WXnRO9FLIIIoVxj3NvGS0m9TeCDzzTTWTrynAVAAAAAElFTkSuQmCC')\",\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/f2280473790358eb93b6ad88e26cf406/e3189/buttonoutline.png\",\n    \"srcSet\": [\"/static/f2280473790358eb93b6ad88e26cf406/a2ead/buttonoutline.png 259w\", \"/static/f2280473790358eb93b6ad88e26cf406/6b9fd/buttonoutline.png 518w\", \"/static/f2280473790358eb93b6ad88e26cf406/e3189/buttonoutline.png 1035w\", \"/static/f2280473790358eb93b6ad88e26cf406/7f15f/buttonoutline.png 1530w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\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  }), \"<CDBBtn color=\\\"primary\\\" [outline]=true>\\n    Primary\\n</CDBBtn>\\n<CDBBtn color=\\\"secondary\\\" [outline]=true>\\n    Secondary\\n</CDBBtn>\\n<CDBBtn color=\\\"success\\\" [outline]=true>\\n    Success\\n</CDBBtn>\\n<CDBBtn color=\\\"danger\\\" [outline]=true>\\n    Danger\\n</CDBBtn>\\n<CDBBtn color=\\\"dark\\\" [outline]=true>\\n    Dark\\n</CDBBtn>\\n<CDBBtn color=\\\"warning\\\" [outline]=true>\\n    Warning\\n</CDBBtn>\\n<CDBBtn color=\\\"info\\\" [outline]=true>\\n    Info\\n</CDBBtn>\\n\")), mdx(\"h2\", null, \"Circular Outline Buttons\"), 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\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7bdb923ab4fa64f08b179766a5ececc8/2b608/buttonroundedoutline.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\": \"6.94980694980695%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAABJ0AAASdAHeZh94AAAAQklEQVQI1wXBiQGAIAwAMfcfVS1/gRbwTC7zg5RN0s3oTo4TbUaejVsTOjsrvGx5GK0iIsQYcVO+XTlLKeaEYagvfjm7TVMpuZzjAAAAAElFTkSuQmCC')\",\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/7bdb923ab4fa64f08b179766a5ececc8/e3189/buttonroundedoutline.png\",\n    \"srcSet\": [\"/static/7bdb923ab4fa64f08b179766a5ececc8/a2ead/buttonroundedoutline.png 259w\", \"/static/7bdb923ab4fa64f08b179766a5ececc8/6b9fd/buttonroundedoutline.png 518w\", \"/static/7bdb923ab4fa64f08b179766a5ececc8/e3189/buttonroundedoutline.png 1035w\", \"/static/7bdb923ab4fa64f08b179766a5ececc8/2b608/buttonroundedoutline.png 1540w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\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  }), \"<CDBBtn color=\\\"primary\\\" [circle]=true [outline]=true>\\n    Primary\\n</CDBBtn>\\n<CDBBtn color=\\\"secondary\\\" [circle]=true [outline]=true>\\n    Secondary\\n</CDBBtn>\\n<CDBBtn color=\\\"success\\\" [circle]=true [outline]=true>\\n    Success\\n</CDBBtn>\\n<CDBBtn color=\\\"danger\\\" [circle]=true [outline]=true>\\n    Danger\\n</CDBBtn>\\n<CDBBtn color=\\\"dark\\\" [circle]=true [outline]=true>\\n    Dark\\n</CDBBtn>\\n<CDBBtn color=\\\"warning\\\" [circle]=true [outline]=true>\\n    Warning\\n</CDBBtn>\\n<CDBBtn color=\\\"info\\\" [circle]=true [outline]=true>\\n    Info\\n</CDBBtn>\\n\")), mdx(\"h2\", null, \"Flat Buttons\"), 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\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/24a45e6999f0ea9c0fa9b408b8a16cb8/b2b2c/buttonflat.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.583011583011583%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAmUlEQVQI1x3LsQqCQACAYd/ToaGt9rYeoTE4t6agoSGIaFNsiWgpKIg2TTIa1M7zVLz7i4Zv/Jx5WDNeaPyDZD27EaxivPOGfig47reo0QDpTZgKgev2uJwDqJYgfcQ1Yrg7cc9LMB2dMTiFsrwLQ1kZZN6gZEumJU+VoSuJeaV8HhFxHJMkCXWtfrnAdiVZ3ZIqTdMZrLV/X7aMjhoOKQSfAAAAAElFTkSuQmCC')\",\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/24a45e6999f0ea9c0fa9b408b8a16cb8/e3189/buttonflat.png\",\n    \"srcSet\": [\"/static/24a45e6999f0ea9c0fa9b408b8a16cb8/a2ead/buttonflat.png 259w\", \"/static/24a45e6999f0ea9c0fa9b408b8a16cb8/6b9fd/buttonflat.png 518w\", \"/static/24a45e6999f0ea9c0fa9b408b8a16cb8/e3189/buttonflat.png 1035w\", \"/static/24a45e6999f0ea9c0fa9b408b8a16cb8/44d59/buttonflat.png 1553w\", \"/static/24a45e6999f0ea9c0fa9b408b8a16cb8/b2b2c/buttonflat.png 1708w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\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  }), \"<CDBBtn color=\\\"primary\\\" [flat]=true>\\n    Primary\\n</CDBBtn>\\n<CDBBtn color=\\\"secondary\\\" [flat]=true>\\n    Secondary\\n</CDBBtn>\\n<CDBBtn color=\\\"success\\\" [flat]=true>\\n    Success\\n</CDBBtn>\\n<CDBBtn color=\\\"danger\\\" [flat]=true>\\n    Danger\\n</CDBBtn>\\n<CDBBtn color=\\\"dark\\\" [flat]=true>\\n    Dark\\n</CDBBtn>\\n<CDBBtn color=\\\"warning\\\" [flat]=true>\\n    Warning\\n</CDBBtn>\\n<CDBBtn color=\\\"info\\\" [flat]=true>\\n    Info\\n</CDBBtn>\\n<CDBBtn color=\\\"white\\\" [flat]=true>\\n    White\\n</CDBBtn>\\n<CDBBtn color=\\\"light\\\" [flat]=true>\\n    Light\\n</CDBBtn>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Label at the side\"), 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\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/6886e3f5aefc23372faf5dbecc8c4887/7c656/buttonlabelatside.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\": \"10.81081081081081%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAmElEQVQI1xXMsQqCQACA4R44aIgGoaWG1t4hCFtsi2qLcJIaowiXTCOktDj19Lzzz74H+Drro2RoZ+y8L6vZhf0mYHpwGHhz/K2DsLqES5u+ZTEeTSgSF1Kbc+zTc08srjdQikrVNE1DJy8NiTDIUpOLClnUfMqMdymoZY58PojvAWEUkaYpRhc0WqC04iUrRJsZYzBt9g9/HFGPPef3jXgAAAAASUVORK5CYII=')\",\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/6886e3f5aefc23372faf5dbecc8c4887/e3189/buttonlabelatside.png\",\n    \"srcSet\": [\"/static/6886e3f5aefc23372faf5dbecc8c4887/a2ead/buttonlabelatside.png 259w\", \"/static/6886e3f5aefc23372faf5dbecc8c4887/6b9fd/buttonlabelatside.png 518w\", \"/static/6886e3f5aefc23372faf5dbecc8c4887/e3189/buttonlabelatside.png 1035w\", \"/static/6886e3f5aefc23372faf5dbecc8c4887/44d59/buttonlabelatside.png 1553w\", \"/static/6886e3f5aefc23372faf5dbecc8c4887/7c656/buttonlabelatside.png 1787w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\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  }), \"<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=\\\"danger\\\">Danger</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<CDBBtn color=\\\"white\\\" label=\\\"left\\\">White</CDBBtn>\\n<CDBBtn color=\\\"light\\\" label=\\\"left\\\">Light</CDBBtn>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Large Button ending with Text\"), 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\": \"382px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3902c41250f42175251e7c4cb663614d/77edc/buttonlargewithendingtext.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\": \"253.28185328185327%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAzCAYAAACXICiDAAAACXBIWXMAABJ0AAASdAHeZh94AAAFTUlEQVRYw7WXeVATdxTHV6hM1XoWsIBCrf3DjjqdqTPt2OmMM05bLRDBo1X8QyOtJqggHqCjtdNqjz86A1UBK6dg+1dvRcCDcHp0OhW5p1XIATk4chESIJB8+3YT3AWDSWqbmQ/v7f7efvIe/NhNGKfTCdfL+ZTQTwoMm3T12bE/z4LkfAv2Udyba4H0gm8kUa04awA1LUOclBM2K2xYlWbGWycGsOaTAaw+PoBFe0wIJyK8sFhiwrwdRhRVWnhhu8qGZSkmvHLAjOWpLtjcF1YcNCNKasT3NY8Jje4ikxvfhMs9CVto5LDdRoTvNtMYZhrVdxZLzJg7eWRN/zDSC/s4jrqjrxwr6kNqbi9utw26hPy2efqXw+F0dWgxD6PyspJD5gM3f1Xi+s8K3PjFRfkPcnTJzfzIyocG7FlXAcn665ASkvXXPOA6L33vOj7eVYeTiXU4Ia7DKeltHH5fhqornbywS27EkW1VSNtWjbQE7xzfWctJT4hrcfLDeqRvr0b9NaVA2GnE4Q9kOLy1Ckd84BB1NA57zb7YG6gtV/BCVYcByXE3kRJf6Tepm2Tcr6O6VC7YNl0mnNpfw3E6ueZR7g229vMUGn+3DL/XqNzbhr1TsFvHQUdjcEV/GL+G1cC9baz2IdSr24hW3OKib7C1tzRtqO1ugXbQwI/cqOsA8000mDMxmEYwfhB4VgTm67XIabgyUTj9XBymZ8UhKCuecOW+8Gz2RjAZ7+J8QykvbCJhwNlYQvSIIE7ujXjMYIWZ6/CtUHifhAsubMPzuQkIydvO8UzWBgScE3mF7ZLJePvxkZcWJGJFsQSvliRhZbEUc7M3Y3bWJq/My96CgIxo5DWU8cIh+wgatB34U/PwEU06OZp9QoFGbSf01oHxfcjddwDb0ESsNj+wAqOj3LOP69D2oB3K11+EilC+scQvVKuXQrEyFMYfv+NHHmxugHw+AwXLAj8JZtAZxECff1YgbG2EInwalCwRARS9owhjOJSLAiGfQ8KLOU8QeoPqVC/NhGrpLIozoAiZJLTQyB2zqXWWOT7wHHVGwq7XItH95stQLpuP/rwzvHBY3wdNQZZ/5J+DmiSawmx0n8+Apa3pv3/qOWn7cR0q5HKIYqIhio7GhpgYAa7jLRs3YnN8POJiY7k6YU28SIR31q5F2dWr/Mj37t0DwzBTEhYWgaioqCfWZGZmCv6XGxsREBDAERgY6BdBQUGcMCcn53Ghv7Iphd5G9oUJI6tUKuwS74CY2CXeyeW+kpgoRkLCVsgqK/+HbeN0b5sxuwUjRhlGTP8S4w2MDnXzI49YVXBo9gLafXD6TTKc6o9IXMXfD0esXXDo0oGedDh7jlLkcdJ5jp7xKFjj4jGSppKwfpJQm0YFabzADfqOuuh155xYUMeKtQdIWCcU0ucS3QEqTiUOuiPRexCGdgn07VKY/06iKMGoOoU7z9ccomuTSFjDC4etWgx2fwmrG2He/+AU+gh9x2n0/PUZzMovYFW7alx1X2Gw61PYTH8IHlL058boCGD3wJjdDeUO+9R1jjG+Q6t9FHd1Btwh7k7ijk7Pnb8jyCfU9BhwS6uHzir4atbaa0Bw0VWEXCzzSLAbT2sLi8sxM+8yCls7BF98evUIpYXQkgos9EDYJRehU6zNKihFYcsEoYF7pxeowBOrfqrGmt/qEXHJJRGuhV+6htkkLJrcYfDFcgQXVyCECBbAHo93FlJSMaGGjez5GfmlKBB22EYdRhaXIbKkHFFE5BOImpQvoa6DC66gRNihbcSOZk0PmtSExj/Y6+6rdegftHLCfwAYwpkGdYqc0gAAAABJRU5ErkJggg==')\",\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/3902c41250f42175251e7c4cb663614d/77edc/buttonlargewithendingtext.png\",\n    \"srcSet\": [\"/static/3902c41250f42175251e7c4cb663614d/a2ead/buttonlargewithendingtext.png 259w\", \"/static/3902c41250f42175251e7c4cb663614d/77edc/buttonlargewithendingtext.png 382w\"],\n    \"sizes\": \"(max-width: 382px) 100vw, 382px\",\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  }), \"<CDBBtn style=\\\"width: 250px; height: 80px\\\" color=\\\"primary\\\" endingText=\\\"top-left\\\">Primary</CDBBtn>\\n<CDBBtn style=\\\"width: 250px; height: 80px\\\" color=\\\"secondary\\\" endingText=\\\"top-right\\\">Secondary</CDBBtn>\\n<CDBBtn style=\\\"width: 250px; height: 80px\\\" color=\\\"success\\\" endingText=\\\"bottom-left\\\">Success</CDBBtn>\\n<CDBBtn style=\\\"width: 250px; height: 80px\\\" color=\\\"danger\\\" endingText=\\\"bottom-right\\\">Danger</CDBBtn>\\n<CDBBtn style=\\\"width: 250px; height: 80px\\\" color=\\\"dark\\\" endingText=\\\"top\\\">Dark</CDBBtn>\\n<CDBBtn style=\\\"width: 250px; height: 80px\\\" color=\\\"warning\\\" endingText=\\\"bottom\\\">Warning</CDBBtn>\\n<CDBBtn style=\\\"width: 250px; height: 80px\\\" color=\\\"info\\\" endingText=\\\"center\\\">Info</CDBBtn>\\n<CDBBtn style=\\\"width: 250px; height: 80px\\\" color=\\\"white\\\" endingText=\\\"center\\\">White</CDBBtn>\\n<CDBBtn style=\\\"width: 250px; height: 80px\\\" color=\\\"light\\\" endingText=\\\"center\\\">Light</CDBBtn>\\n\")), mdx(\"h2\", null, \"Block Button\"), 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\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f204523c009bb974eb660a79dea1f435/913b9/buttonblock.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\": \"53.28185328185329%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABJ0AAASdAHeZh94AAABR0lEQVQoz33SSU/CQACG4fnRHiQqluXsxe3oRSVGFg9A6MJ6MFExErpBhBajaNC4HLC0FPI5rCpMOTyZZL43kx5KqpdvSB4Z4E9byJwwHJsQ6CadPYAf35lLDT/rIi0Qo93BlXKPst5EWWO7pdtd3fTcR260Bu0MkNjjNdYqEfiVGDblKNOWHENQTazYo9iQz8EpcZCBWoUrJOHmBbg5fll2ehYl9j7vMvQNEaSry3jPpvFZEvFRFBaIv2dJYux/uoJA35BA4okE1n0+BEIhbAcCTFwwiFA47LmP+Dlu3JDK0zMuqipSag1JhS1FpbW65z6hI63WQaT2F3aUFxzoHexpC6Z3+/Q8rP2/W+x2tUlD0NcAW6QKVJ6tR33nvPe5IkjfeYVtNeBYhifbaqLXXd04tHEsk/42A8BdYTAE+i79SHu4spv5AaX46pYSeQyzAAAAAElFTkSuQmCC')\",\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/f204523c009bb974eb660a79dea1f435/e3189/buttonblock.png\",\n    \"srcSet\": [\"/static/f204523c009bb974eb660a79dea1f435/a2ead/buttonblock.png 259w\", \"/static/f204523c009bb974eb660a79dea1f435/6b9fd/buttonblock.png 518w\", \"/static/f204523c009bb974eb660a79dea1f435/e3189/buttonblock.png 1035w\", \"/static/f204523c009bb974eb660a79dea1f435/44d59/buttonblock.png 1553w\", \"/static/f204523c009bb974eb660a79dea1f435/913b9/buttonblock.png 1822w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\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  }), \"<CDBBtn color=\\\"primary\\\" [block]=true>\\n    Primary\\n</CDBBtn>\\n<CDBBtn color=\\\"secondary\\\" [block]=true>\\n    Secondary\\n</CDBBtn>\\n<CDBBtn color=\\\"success\\\" [block]=true>\\n    Success\\n</CDBBtn>\\n<CDBBtn color=\\\"danger\\\" [block]=true>\\n    Danger\\n</CDBBtn>\\n<CDBBtn color=\\\"dark\\\" [block]=true>\\n    Dark\\n</CDBBtn>\\n<CDBBtn color=\\\"info\\\" [block]=true>\\n    Info\\n</CDBBtn>\\n<CDBBtn color=\\\"warning\\\" [block]=true>\\n    Warning\\n</CDBBtn>\\n<CDBBtn color=\\\"white\\\" [block]=true>\\n    White\\n</CDBBtn>\\n<CDBBtn color=\\\"light\\\" [block]=true>\\n    Light\\n</CDBBtn>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Buttons with Icons\"), 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\": \"512px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e41e70b0d877528cd237ec49c3693b0c/01e7c/buttonwithicons.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\": \"22.77992277992278%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABJ0AAASdAHeZh94AAAA+klEQVQY042QsU7CYBRGa+I74HP4NsQQB6IxRiPP4BO4aRyMFFhMxMTBgCZSdCEWAQcYHGxiTCsgdKgFStv/+FPQNC56k5Pvu3c4w1UQgtmIBfEuft3/GiFdyqwEE4twmGX6oeL1s7Ln5th5/MEJeAa9UcBWtcGG1pDZZFNrsnPfYvuuRfJG58owI2kk9Jw2dNOYj0m6T2sMOylsyaCzjv+aArfGsz1l6aiIcnhBQi2xkiuzel5l+fgS5eCM/Yd2TDiycN9VPq2CzILMfIQjd8c8JRwb9F2fTEVn91Znr1Ino9V/Mn1do/zy9i0U0RuDMIaYEy7uQvz/h19bhWSzwKGbogAAAABJRU5ErkJggg==')\",\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/e41e70b0d877528cd237ec49c3693b0c/01e7c/buttonwithicons.png\",\n    \"srcSet\": [\"/static/e41e70b0d877528cd237ec49c3693b0c/a2ead/buttonwithicons.png 259w\", \"/static/e41e70b0d877528cd237ec49c3693b0c/01e7c/buttonwithicons.png 512w\"],\n    \"sizes\": \"(max-width: 512px) 100vw, 512px\",\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  }), \"<CDBBtn color=\\\"warning\\\">\\n    <CDBIcon icon=\\\"magic\\\" class=\\\"ml-1\\\"></CDBIcon>\\n    Warning\\n</CDBBtn>\\n<CDBBtn color=\\\"info\\\">\\n    Info\\n    <CDBIcon icon=\\\"magic\\\" class=\\\"mr-1\\\"></CDBIcon>\\n</CDBBtn>\\n\")), mdx(\"h2\", null, \"Button Sizes\"), 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\": \"656px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7a395e2364a91041ddf4f2e880135824/748f4/buttonsize.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\": \"20.849420849420845%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABJ0AAASdAHeZh94AAAA90lEQVQY05WPTytEURyG56uwsnMTn8EHsLRkgWLSGDZWMjViChsh/y1sbFBMJqWIBpGZKaEwKQvq3nPuNOfcc5v7ODMWVhbeenp/9aun3hg21aDG9bMh//TDleXy0VAqh/wnURQRqx8P7wGtCY+2pKB9VNAxJmgZ8uia8VGyytZciZWpezYyBRYn78juvPCpXOZv95i+2WWpcIgOTUPaEBbfNE39Lk5S4iQEzoigecCjM+Ujv3zSwxdM9J2RGjxnvOeU7UyRV/FB79Es3Qdp4rkFKoH6Fbp+yOaJZPVYspaTrFuWs4L9fMV+a2gdoJRGW+ptjPlz8jdi3xRQ8afMNgAAAABJRU5ErkJggg==')\",\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/7a395e2364a91041ddf4f2e880135824/748f4/buttonsize.png\",\n    \"srcSet\": [\"/static/7a395e2364a91041ddf4f2e880135824/a2ead/buttonsize.png 259w\", \"/static/7a395e2364a91041ddf4f2e880135824/6b9fd/buttonsize.png 518w\", \"/static/7a395e2364a91041ddf4f2e880135824/748f4/buttonsize.png 656w\"],\n    \"sizes\": \"(max-width: 656px) 100vw, 656px\",\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  }), \"<CDBBtn color=\\\"primary\\\" size=\\\"xl\\\">Extra Large button</CDBBtn>\\n<CDBBtn color=\\\"secondary\\\" size=\\\"large\\\">Large button</CDBBtn>\\n<CDBBtn color=\\\"warning\\\">Normal button</CDBBtn>\\n<CDBBtn color=\\\"success\\\" size=\\\"small\\\">Small button</CDBBtn>\\n\")), mdx(\"h2\", null, \"Disabled Buttons\"), 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\": \"252px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b9edd2ee030af38ff00f1243733ca2ee/5e02b/disabledbutton.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\": \"36.507936507936506%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABJ0AAASdAHeZh94AAAA/0lEQVQoz6WNzUvDQBTE+88XtCi9CFrbfEhB26RpqFD66dGrkkiaXUnTgMcWxEvbXUmm2c22KNqD+GDYmXmP35agJsvwr8kUoCRMETK8xR+YPS1BvdUPEaVD568QPi+xoO9I0/QAVUARUwzaEa7LHsyzFzROPGinQj603OsVH0al8DLnvbh1dQLO+O/AiTNHp04x7iwwaM0xdROM7BjDdoz+bYRpN5Gv6MTeaVDcN+lx4NCKcHMewLoi+fGrlF2j8pO7ixDWJYFVI3Iv+mY1gGsQsGPAx3ECu54fmSG6+qyQUbyuqbySyI4W4KEXgfPP78B9YJxhs1n/SYxt8ZWxA7UU9iepC+1PAAAAAElFTkSuQmCC')\",\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/b9edd2ee030af38ff00f1243733ca2ee/5e02b/disabledbutton.png\",\n    \"srcSet\": [\"/static/b9edd2ee030af38ff00f1243733ca2ee/5e02b/disabledbutton.png 252w\"],\n    \"sizes\": \"(max-width: 252px) 100vw, 252px\",\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  }), \"<CDBBtn color=\\\"secondary\\\" [disabled]=true>\\n    Disabled Button\\n</CDBBtn>\\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 Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {ButtonModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Button Bootstrap Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Button 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  }), \"action=true\")), 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  }), \"active=true\")), 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  }), \"block=true\")), 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  }), \"circle=true\")), 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  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"class=\\\"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  }), \"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  }), \"disabled=true\")), 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  }), \"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  }), \"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  }), \"flat=true\")), 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  }), \"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  }), \"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  }), \"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  }), \"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, xl]\"), \".\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"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  }), \"social=\\\"fb\\\"\")), 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  }), \"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  }), \"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","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#circular-buttons","title":"Circular Buttons","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#outline-buttons","title":"Outline Buttons","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#circular-outline-buttons","title":"Circular Outline Buttons","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#flat-buttons","title":"Flat Buttons","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]},{"url":"#label-at-the-side","title":"Label at the side","items":[{"items":[{"items":[{"items":[{"url":"#html-5","title":"html"}]}]}]}]},{"url":"#large-button-ending-with-text","title":"Large Button ending with Text","items":[{"items":[{"items":[{"items":[{"url":"#html-6","title":"html"}]}]}]}]},{"url":"#block-button","title":"Block Button","items":[{"items":[{"items":[{"items":[{"url":"#html-7","title":"html"}]}]}]}]},{"url":"#buttons-with-icons","title":"Buttons with Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-8","title":"html"}]}]}]}]},{"url":"#button-sizes","title":"Button Sizes","items":[{"items":[{"items":[{"items":[{"url":"#html-9","title":"html"}]}]}]}]},{"url":"#disabled-buttons","title":"Disabled Buttons","items":[{"items":[{"items":[{"items":[{"url":"#html-10","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-button-bootstrap-modules-used","title":"Contrast Button Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/components/buttons.md"},"frontmatter":{"metaTitle":"Button 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":"ea50385f-1ab1-5cc7-ba5a-bb97912b7bd1"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}