{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/badge","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"0fdfda2c-b421-547d-8864-514fc2c0217f","title":"Badges","slug":"/contrast/react/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 React\",\n  \"metaDescription\": \"Building a Badge Component using the Contrast Bootstrap React Package\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Badges\"), mdx(\"p\", null, \"Documentation and examples for badges, our 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(\"div\", {\n    className: \"container\"\n  }, mdx(\"span\", {\n    className: \"badge bg-primary\"\n  }, \"Primary\"), mdx(\"span\", {\n    className: \"badge bg-secondary\"\n  }, \"Secondary Badge\"), mdx(\"span\", {\n    className: \"badge bg-success\"\n  }, \"Success Badge\"), mdx(\"span\", {\n    className: \"badge bg-danger\"\n  }, \"Danger Badge\"), mdx(\"span\", {\n    className: \"badge bg-warning text-dark\"\n  }, \"Warning Badge\"), mdx(\"span\", {\n    className: \"badge bg-info\"\n  }, \"Info Badge\"), mdx(\"span\", {\n    className: \"badge bg-dark text-light\"\n  }, \"Dark Badge\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBadge, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Badge = () => {\\n  return (\\n    <CDBContainer>\\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    </CDBContainer>\\n  );\\n};\\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(\"div\", {\n    className: \"container\"\n  }, mdx(\"span\", {\n    className: \"badge badge-pill bg-primary\"\n  }, \"Primary\"), mdx(\"span\", {\n    className: \"badge badge-pill bg-secondary\"\n  }, \"Secondary Badge\"), mdx(\"span\", {\n    className: \"badge badge-pill bg-success\"\n  }, \"Success Badge\"), mdx(\"span\", {\n    className: \"badge badge-pill bg-danger\"\n  }, \"Danger Badge\"), mdx(\"span\", {\n    className: \"badge badge-pill bg-warning text-dark\"\n  }, \"Warning Badge\"), mdx(\"span\", {\n    className: \"badge badge-pill bg-info\"\n  }, \"Info Badge\"), mdx(\"span\", {\n    className: \"badge badge-pill bg-dark text-light\"\n  }, \"Dark Badge\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBadge, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Badge = () => {\\n  return (\\n    <CDBContainer>\\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    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Contextual Variations\"), mdx(\"p\", null, \"Add any of the below mentioned properties to change the appearance of a badge.\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg bg-secondary\"\n  }, \"Large\"), mdx(\"span\", {\n    className: \"badge bg-primary\"\n  }, \"Normal\"), mdx(\"span\", {\n    className: \"badge badge-sm bg-success\"\n  }, \"Small\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBadge, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Badge = () => {\\n  return (\\n    <CDBContainer>\\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    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h2\", null, \"Flat Badges\"), mdx(\"p\", null, \"Add the flat property to change the appearance of a badge.\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"span\", {\n    className: \"badge badge-flat bg-primary\"\n  }, \"Primary\"), mdx(\"span\", {\n    className: \"badge badge-flat bg-secondary\"\n  }, \"Flat Secondary\"), mdx(\"span\", {\n    className: \"badge badge-flat bg-success\"\n  }, \"Flat Success\"), mdx(\"span\", {\n    className: \"badge badge-flat bg-danger\"\n  }, \"Flat Danger\"), mdx(\"span\", {\n    className: \"badge badge-flat bg-warning text-dark\"\n  }, \"Flat Warning\"), mdx(\"span\", {\n    className: \"badge badge-flat bg-info\"\n  }, \"Flat Info\"), mdx(\"span\", {\n    className: \"badge badge-flat bg-dark text-light\"\n  }, \"Flat Dark\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBadge, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Badge = () => {\\n  return (\\n    <CDBContainer>\\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    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Badges with Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"p\", null, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"CDBIcon\"), \" to add icons to a badge.\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"span\", {\n    className: \"badge bg-secondary\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook-f\"\n  })), mdx(\"span\", {\n    className: \"badge bg-primary\"\n  }, mdx(\"i\", {\n    className: \"fab fa-instagram\"\n  })), mdx(\"span\", {\n    className: \"badge bg-success\"\n  }, mdx(\"i\", {\n    className: \"fab fa-snapchat-ghost\"\n  })), mdx(\"span\", {\n    className: \"badge bg-info\"\n  }, mdx(\"i\", {\n    className: \"fa fa-anchor\"\n  })), mdx(\"span\", {\n    className: \"badge bg-warning text-dark\"\n  }, mdx(\"i\", {\n    className: \"fa fa-sun\"\n  })), mdx(\"span\", {\n    className: \"badge bg-danger\"\n  }, mdx(\"i\", {\n    className: \"fa fa-battery-three-quarters\"\n  })), mdx(\"span\", {\n    className: \"badge bg-success\"\n  }, mdx(\"i\", {\n    className: \"fab fa-btc\"\n  })), mdx(\"span\", {\n    className: \"badge bg-secondary\"\n  }, mdx(\"i\", {\n    className: \"fa fa-heart\"\n  })), mdx(\"span\", {\n    className: \"badge bg-danger\"\n  }, mdx(\"i\", {\n    className: \"fab fa-apple\"\n  })), mdx(\"span\", {\n    className: \"badge bg-primary text-light\"\n  }, mdx(\"i\", {\n    className: \"fa fa-users\"\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBadge, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Badge = () => {\\n  return (\\n    <CDBContainer>\\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    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Rounded Badges with Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(\"span\", {\n    className: \"badge badge-lg badge-pro\"\n  }, \"Pro Component\")), mdx(\"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(\"div\", {\n    className: \"container\"\n  }, mdx(\"span\", {\n    className: \"badge badge-pill bg-secondary\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook-f\"\n  })), mdx(\"span\", {\n    className: \"badge badge-pill bg-primary\"\n  }, mdx(\"i\", {\n    className: \"fab fa-instagram\"\n  })), mdx(\"span\", {\n    className: \"badge badge-pill bg-success\"\n  }, mdx(\"i\", {\n    className: \"fab fa-snapchat-ghost\"\n  })), mdx(\"span\", {\n    className: \"badge badge-pill bg-info\"\n  }, mdx(\"i\", {\n    className: \"fa fa-anchor\"\n  })), mdx(\"span\", {\n    className: \"badge badge-pill bg-warning text-dark\"\n  }, mdx(\"i\", {\n    className: \"fa fa-sun\"\n  })), mdx(\"span\", {\n    className: \"badge badge-pill bg-danger\"\n  }, mdx(\"i\", {\n    className: \"fa fa-battery-three-quarters\"\n  })), mdx(\"span\", {\n    className: \"badge badge-pill bg-success\"\n  }, mdx(\"i\", {\n    className: \"fab fa-btc\"\n  })), mdx(\"span\", {\n    className: \"badge badge-pill bg-secondary\"\n  }, mdx(\"i\", {\n    className: \"fa fa-heart\"\n  })), mdx(\"span\", {\n    className: \"badge badge-pill bg-danger\"\n  }, mdx(\"i\", {\n    className: \"fab fa-apple\"\n  })), mdx(\"span\", {\n    className: \"badge badge-pill bg-primary text-light\"\n  }, mdx(\"i\", {\n    className: \"fa fa-users\"\n  }))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBBadge, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nexport const Badge = () => {\\n  return (\\n    <CDBContainer>\\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    </CDBContainer>\\n  );\\n};\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Contrast Badge component. You will find out which modules are needed, the different possibilities of configuring the component, and what events and methods you can use in working with it.\"), mdx(\"h2\", null, \"Contrast Badge Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast Badge component first before using it. If icons are needed, you will also need to import the Contrast Icon component.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBBadge, CDBIcon } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Badge Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBBadge 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  }), \"Adds custom classes\"), 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  }), \"<CDBBadge className=\\\"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  }), \"<CDBBadge 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  }), \"<CDBBadge color=\\\"primary\\\" flat .../>\")), 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  }), \"<CDBBadge 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  }), \"<CDBBadge 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  }), \"<CDBBadge color=\\\"secondary\\\" tag=\\\"span\\\" .../>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#badges","title":"Badges","items":[{"url":"#examples","title":"Examples"},{"url":"#pill-badges","title":"Pill Badges"},{"url":"#contextual-variations","title":"Contextual Variations"},{"url":"#flat-badges","title":"Flat Badges"},{"url":"#badges-with-icons","title":"Badges with Icons"},{"url":"#rounded-badges-with-icons","title":"Rounded Badges with Icons"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-badge-import-statement","title":"Contrast Badge Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/badge.mdx"},"frontmatter":{"metaTitle":"Badge Component for Contrast Bootstrap React","metaDescription":"Building a Badge Component using the Contrast Bootstrap React Package"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"0fdfda2c-b421-547d-8864-514fc2c0217f"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}