{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/badge","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"22bd35d4-7f5f-57f8-b8e2-5541f888ad6d","title":"Badges","slug":"/contrast/angular/components/badge"},"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\": \"Badges\",\n  \"metaTitle\": \"Badge Component for Contrast Bootstrap Angular\",\n  \"metaDescription\": \"Angular Bootstrap Badge component is a small count and labeling component\"\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, \"Badges\"), mdx(\"p\", null, \"Angular Bootstrap Badge component is a small count and labeling component.\"), mdx(\"h2\", null, \"Examples\"), mdx(\"p\", null, \"Badges scale to match the size of the immediate parent element by using relative font sizing and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"em\"), \" units.\"), 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\": \"892px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b2d714f35cc99504c2f64765c2c8aacd/1568e/badgepill.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\": \"9.652509652509652%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAnElEQVQI1wXBTwvBYADAYR+cuHPA5ExLJmr5GwclopYLBwfWzMKaxgy9eEd+nifmBl+K/RfVqcT3BEN9R7++xbMFdWtCYqayvDhIvUqQSSF3Fp+ngbw0+ckD6vrI/Pqg12qiKAVih3NEvn2jMhac3AeDhklXW+Nad2qbEfFxmYVvIxoVvHSSt20iwgnhXiMSDqWVg3EO6eg62VyOP0rGh+FYoN6JAAAAAElFTkSuQmCC')\",\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/b2d714f35cc99504c2f64765c2c8aacd/1568e/badgepill.png\",\n    \"srcSet\": [\"/static/b2d714f35cc99504c2f64765c2c8aacd/a2ead/badgepill.png 259w\", \"/static/b2d714f35cc99504c2f64765c2c8aacd/6b9fd/badgepill.png 518w\", \"/static/b2d714f35cc99504c2f64765c2c8aacd/1568e/badgepill.png 892w\"],\n    \"sizes\": \"(max-width: 892px) 100vw, 892px\",\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  }), \"<CDBBadge color=\\\"primary\\\">\\n    Primary\\n  </CDBBadge>\\n  <CDBBadge color=\\\"secondary\\\">\\n    Secondary Badge\\n  </CDBBadge>\\n  <CDBBadge color=\\\"success\\\">\\n    Success Badge\\n  </CDBBadge>\\n  <CDBBadge color=\\\"danger\\\">\\n    Danger Badge\\n  </CDBBadge>\\n  <CDBBadge color=\\\"warning\\\">\\n    Warning Badge\\n  </CDBBadge>\\n  <CDBBadge color=\\\"info\\\">\\n    Info Badge\\n  </CDBBadge>\\n  <CDBBadge color=\\\"dark\\\">\\n    Dark Badge\\n</CDBBadge>\\n\")), mdx(\"h2\", null, \"Pill Badges\"), mdx(\"p\", null, \"Set the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"borderType\"), \" property to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pill\"), \" to make badges more rounded.\"), 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\": \"892px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b2d714f35cc99504c2f64765c2c8aacd/1568e/badgepill.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\": \"9.652509652509652%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAnElEQVQI1wXBTwvBYADAYR+cuHPA5ExLJmr5GwclopYLBwfWzMKaxgy9eEd+nifmBl+K/RfVqcT3BEN9R7++xbMFdWtCYqayvDhIvUqQSSF3Fp+ngbw0+ckD6vrI/Pqg12qiKAVih3NEvn2jMhac3AeDhklXW+Nad2qbEfFxmYVvIxoVvHSSt20iwgnhXiMSDqWVg3EO6eg62VyOP0rGh+FYoN6JAAAAAElFTkSuQmCC')\",\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/b2d714f35cc99504c2f64765c2c8aacd/1568e/badgepill.png\",\n    \"srcSet\": [\"/static/b2d714f35cc99504c2f64765c2c8aacd/a2ead/badgepill.png 259w\", \"/static/b2d714f35cc99504c2f64765c2c8aacd/6b9fd/badgepill.png 518w\", \"/static/b2d714f35cc99504c2f64765c2c8aacd/1568e/badgepill.png 892w\"],\n    \"sizes\": \"(max-width: 892px) 100vw, 892px\",\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  }), \"  <CDBBadge color=\\\"primary\\\" borderType=\\\"pill\\\">\\n    Primary\\n  </CDBBadge>\\n  <CDBBadge color=\\\"secondary\\\" borderType=\\\"pill\\\">\\n    Secondary Badge\\n  </CDBBadge>\\n  <CDBBadge color=\\\"success\\\" borderType=\\\"pill\\\">\\n    Success Badge\\n  </CDBBadge>\\n  <CDBBadge color=\\\"danger\\\" borderType=\\\"pill\\\">\\n    Danger Badge\\n  </CDBBadge>\\n  <CDBBadge color=\\\"warning\\\" borderType=\\\"pill\\\">\\n    Warning Badge\\n  </CDBBadge>\\n  <CDBBadge color=\\\"info\\\" borderType=\\\"pill\\\">\\n    Info Badge\\n  </CDBBadge>\\n  <CDBBadge color=\\\"dark\\\" borderType=\\\"pill\\\">\\n    Dark Badge\\n  </CDBBadge>\\n\")), mdx(\"h2\", null, \"Contextual Variations\"), mdx(\"p\", null, \"Add any of the below mentioned properties to change the appearance of a badge.\"), 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\": \"392px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f83b425bb2fb10d7c2ff1377a1b7f65c/0acb4/badgesizevariations.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\": \"25.86872586872587%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAABJ0AAASdAHeZh94AAABD0lEQVQY032QPUvDUBSG+0fEwdFJcHBxcfJXKFrB1UGorYiTdNJRiiBFBwc320VBU/CjIKmCH1S0SFt1CCVpYkptmtzcxyQt6GA98HDOPeflhffGpJQMrP9uf8olsXDQtTaFXI1CvobS76b+FYmun7uc3jkoDw5n9w6XTw6uJxFS8PbZoGppEY7nRvrIsHT+QXzqmNTMBWvzVyxOn1C+0egIyeRqk/FEi4mUzeiSzdhyE8OSvJrvjGQXGMrOMbw7i1K9/TF8eWywmSiS2VDZSZfYShapVwy8IEL60GBlz2D9wCC5H3adVtvH6thk1Dzbai7giLqp9Q1lmN1H+N0gSg/hu9GuVyLA+0X4lgP/8Bt/1WZZdRWN1wAAAABJRU5ErkJggg==')\",\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/f83b425bb2fb10d7c2ff1377a1b7f65c/0acb4/badgesizevariations.png\",\n    \"srcSet\": [\"/static/f83b425bb2fb10d7c2ff1377a1b7f65c/a2ead/badgesizevariations.png 259w\", \"/static/f83b425bb2fb10d7c2ff1377a1b7f65c/0acb4/badgesizevariations.png 392w\"],\n    \"sizes\": \"(max-width: 392px) 100vw, 392px\",\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  }), \"  <CDBBadge color=\\\"secondary\\\" size=\\\"large\\\">\\n    Large\\n  </CDBBadge>\\n  <CDBBadge color=\\\"primary\\\">Medium</CDBBadge>\\n  <CDBBadge color=\\\"success\\\" size=\\\"small\\\">\\n    Small\\n  </CDBBadge>\\n\")), mdx(\"h2\", null, \"Flat Badges\"), mdx(\"p\", null, \"Add the flat property to change the appearance of a badge.\"), 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/03a984fb8c6585bac613ae731bfaae38/dc61a/flatbadges.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,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAABJ0AAASdAHeZh94AAAAXElEQVQI1wFRAK7/AMDV+v+ErPb/utL7/9TJ6v+xotv/xrXm/8vk3P95xZ//lde6//PIwf/vgHL/86qj//z62P/26KX///TG/7ni6f+N1eH/zNPU/3Rycv+/v7//j+9CQ3xfGRoAAAAASUVORK5CYII=')\",\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/03a984fb8c6585bac613ae731bfaae38/e3189/flatbadges.png\",\n    \"srcSet\": [\"/static/03a984fb8c6585bac613ae731bfaae38/a2ead/flatbadges.png 259w\", \"/static/03a984fb8c6585bac613ae731bfaae38/6b9fd/flatbadges.png 518w\", \"/static/03a984fb8c6585bac613ae731bfaae38/e3189/flatbadges.png 1035w\", \"/static/03a984fb8c6585bac613ae731bfaae38/dc61a/flatbadges.png 1147w\"],\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  }), \"  <CDBBadge color=\\\"primary\\\" flat>\\n    Flat Primary\\n  </CDBBadge>\\n  <CDBBadge color=\\\"secondary\\\" flat>\\n    Flat Secondary\\n  </CDBBadge>\\n  <CDBBadge color=\\\"success\\\" flat>\\n    Flat Success\\n  </CDBBadge>\\n  <CDBBadge color=\\\"danger\\\" flat>\\n    Flat Danger\\n  </CDBBadge>\\n  <CDBBadge color=\\\"warning\\\" flat>\\n    Flat Warning\\n  </CDBBadge>\\n  <CDBBadge color=\\\"info\\\" flat>\\n    Flat Info\\n  </CDBBadge>\\n  <CDBBadge color=\\\"dark\\\" flat>\\n    Flat Dark\\n  </CDBBadge>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Badges with Icons\"), mdx(\"p\", null, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBIcon\"), \" to add icons to a badge.\"), 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\": \"922px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/89e32c96176b32e2f0499c52b607f2d0/6da96/badgewithiconsandroundedbadges.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.424710424710423%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAmUlEQVQI1wXBXQvBUACAYf//1o0LFyLlQkmifCUxrSklGiZrZth2ZtvRERv1ep6C7ynsjUC3cgzrx8Rbot/29BzBNopBGWTSRTWqSOdI/TQjCFOmXY/El+TjNkK8KA0zXPGlcHWfWCuf+e7DwswZnXW0i0nH9lmHET+p8U4cZK1MYh+oWBPu95h+0+ZxS3kPWgSBothTOEHOHy/VjlzKHLlIAAAAAElFTkSuQmCC')\",\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/89e32c96176b32e2f0499c52b607f2d0/6da96/badgewithiconsandroundedbadges.png\",\n    \"srcSet\": [\"/static/89e32c96176b32e2f0499c52b607f2d0/a2ead/badgewithiconsandroundedbadges.png 259w\", \"/static/89e32c96176b32e2f0499c52b607f2d0/6b9fd/badgewithiconsandroundedbadges.png 518w\", \"/static/89e32c96176b32e2f0499c52b607f2d0/6da96/badgewithiconsandroundedbadges.png 922w\"],\n    \"sizes\": \"(max-width: 922px) 100vw, 922px\",\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  }), \"  <CDBBadge color=\\\"secondary\\\">\\n    <CDBIcon fab icon=\\\"facebook-f\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"primary\\\">\\n    <CDBIcon fab icon=\\\"instagram\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"success\\\">\\n    <CDBIcon fab icon=\\\"snapchat-ghost\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"info\\\">\\n    <CDBIcon icon=\\\"anchor\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"warning\\\">\\n    <CDBIcon far icon=\\\"sun\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"danger\\\">\\n    <CDBIcon icon=\\\"battery-three-quarters\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"success\\\">\\n    <CDBIcon fab icon=\\\"btc\\\" size=\\\"large\\\" />\\n  </CDBBadge>\\n  <CDBBadge borderType=\\\"pill\\\" color=\\\"secondary\\\" size=\\\"large\\\">\\n    <CDBIcon icon=\\\"heart\\\" />\\n  </CDBBadge>\\n  <CDBBadge borderType=\\\"pill\\\" color=\\\"danger\\\">\\n    <CDBIcon fab icon=\\\"apple\\\" />\\n  </CDBBadge>\\n  <CDBBadge borderType=\\\"pill\\\" color=\\\"primary\\\" size=\\\"large\\\">\\n    <CDBIcon icon=\\\"users\\\" />\\n  </CDBBadge>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Rounded Badges with Icons\"), mdx(\"p\", null, \"Set the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"borderType\"), \" property to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pill\"), \" to make badges more rounded.\\nUse \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBIcon\"), \" to add icons to a badge.\"), 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\": \"922px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/89e32c96176b32e2f0499c52b607f2d0/6da96/badgewithiconsandroundedbadges.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.424710424710423%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAmUlEQVQI1wXBXQvBUACAYf//1o0LFyLlQkmifCUxrSklGiZrZth2ZtvRERv1ep6C7ynsjUC3cgzrx8Rbot/29BzBNopBGWTSRTWqSOdI/TQjCFOmXY/El+TjNkK8KA0zXPGlcHWfWCuf+e7DwswZnXW0i0nH9lmHET+p8U4cZK1MYh+oWBPu95h+0+ZxS3kPWgSBothTOEHOHy/VjlzKHLlIAAAAAElFTkSuQmCC')\",\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/89e32c96176b32e2f0499c52b607f2d0/6da96/badgewithiconsandroundedbadges.png\",\n    \"srcSet\": [\"/static/89e32c96176b32e2f0499c52b607f2d0/a2ead/badgewithiconsandroundedbadges.png 259w\", \"/static/89e32c96176b32e2f0499c52b607f2d0/6b9fd/badgewithiconsandroundedbadges.png 518w\", \"/static/89e32c96176b32e2f0499c52b607f2d0/6da96/badgewithiconsandroundedbadges.png 922w\"],\n    \"sizes\": \"(max-width: 922px) 100vw, 922px\",\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  }), \"  <CDBBadge color=\\\"secondary\\\">\\n    <CDBIcon fab icon=\\\"facebook-f\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"primary\\\">\\n    <CDBIcon fab icon=\\\"instagram\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"success\\\">\\n    <CDBIcon fab icon=\\\"snapchat-ghost\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"info\\\">\\n    <CDBIcon icon=\\\"anchor\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"warning\\\">\\n    <CDBIcon far icon=\\\"sun\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"danger\\\">\\n    <CDBIcon icon=\\\"battery-three-quarters\\\" />\\n  </CDBBadge>\\n  <CDBBadge color=\\\"success\\\">\\n    <CDBIcon fab icon=\\\"btc\\\" size=\\\"large\\\" />\\n  </CDBBadge>\\n  <CDBBadge borderType=\\\"pill\\\" color=\\\"secondary\\\" size=\\\"large\\\">\\n    <CDBIcon icon=\\\"heart\\\" />\\n  </CDBBadge>\\n  <CDBBadge borderType=\\\"pill\\\" color=\\\"danger\\\">\\n    <CDBIcon fab icon=\\\"apple\\\" />\\n  </CDBBadge>\\n  <CDBBadge borderType=\\\"pill\\\" color=\\\"primary\\\" size=\\\"large\\\">\\n    <CDBIcon icon=\\\"users\\\" />\\n  </CDBBadge>\\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 Badge Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {BadgeModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Badge Bootstrap Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Badge component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"class=\\\"myClass\\\"\")), 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 badge color, accepts CDB predefined color classes: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"primary\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"secondary\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"success\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"danger\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"warning\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"info\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"light\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"dark\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"[color]\", \"=\\\"primary\\\"\")), 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 badge\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"color=\\\"primary\\\" flat=\\\"true\\\"\")), 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 badge size, available values: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"medium\"), \" by default\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"color=\\\"secondary\\\" size=\\\"large\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"borderType\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"box\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Determines the corners effect of the badge\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"color=\\\"secondary\\\" borderType=\\\"pill\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"span\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"color=\\\"secondary\\\" tag=\\\"span\\\"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#badges","title":"Badges","items":[{"url":"#examples","title":"Examples","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#pill-badges","title":"Pill Badges","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#contextual-variations","title":"Contextual Variations","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#flat-badges","title":"Flat Badges","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#badges-with-icons","title":"Badges with Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]},{"url":"#rounded-badges-with-icons","title":"Rounded Badges with Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-5","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-badge-bootstrap-modules-used","title":"Contrast Badge Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/components/badge.md"},"frontmatter":{"metaTitle":"Badge Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap Badge component is a small count and labeling component"}},"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":"22bd35d4-7f5f-57f8-b8e2-5541f888ad6d"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}