{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/listgroup","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"13211923-81b3-51f3-b43e-766af2293fdc","title":"LIstGroup","slug":"/contrast/react/components/listgroup"},"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\": \"LIstGroup\",\n  \"metaTitle\": \"LIstGroup Component for Contrast Bootstrap React\",\n  \"metaDescription\": \"Building a LIstGroup Component using the Contrast Bootstrap React Package\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar CDBBadge = makeShortcode(\"CDBBadge\");\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, \"ListGroup\"), mdx(\"p\", null, \"List group is a flexible component which displays not only simple list of elements but complex custom content.\"), mdx(\"h2\", null, \"Examples\"), mdx(\"p\", null, \"Default ListGroup example.\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"ul\", {\n    className: \"list-group\",\n    style: {\n      \"width\": \"28rem\"\n    }\n  }, mdx(\"li\", {\n    className: \"list-group-item\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item\"\n  }, \"List Group\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBListGroup, CDBListGroupItem, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst LIstGroup = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBListGroup style={{ width: \\\"30rem\\\" }}>\\n              <CDBListGroupItem>List Group </CDBListGroupItem>\\n              <CDBListGroupItem>List Group</CDBListGroupItem>\\n              <CDBListGroupItem>List Group</CDBListGroupItem>\\n              <CDBListGroupItem>List Group</CDBListGroupItem>\\n              <CDBListGroupItem>List Group</CDBListGroupItem>\\n              <CDBListGroupItem>List Group</CDBListGroupItem>\\n            </CDBListGroup>\\n    </CDBContainer>\\n  );\\n};\\nexport default  LIstGroup;\\n\")), mdx(\"h2\", null, \"List Group as Link\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"ul\", {\n    className: \"list-group\",\n    style: {\n      \"width\": \"28rem\"\n    }\n  }, mdx(\"li\", {\n    className: \"list-group-item list-group-item-action active\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item\"\n  }, \"List Group Link\"), mdx(\"li\", {\n    className: \"list-group-item\"\n  }, \"List Group\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBListGroup, CDBListGroupItem, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst LIstGroup = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBListGroup style={{ width: \\\"30rem\\\" }}>\\n              <CDBListGroupItem href=\\\"#\\\" active>\\n                List Group\\n              </CDBListGroupItem>\\n              <CDBListGroupItem href=\\\"#\\\" hover>\\n                List Group\\n              </CDBListGroupItem>\\n              <CDBListGroupItem href=\\\"#\\\" hover>\\n                List Group\\n              </CDBListGroupItem>\\n              <CDBListGroupItem href=\\\"#\\\" hover>\\n                List Group\\n              </CDBListGroupItem>\\n              <CDBListGroupItem href=\\\"#\\\" hover>\\n                List Group Link\\n              </CDBListGroupItem>\\n              <CDBListGroupItem href=\\\"#\\\" hover>\\n                List Group\\n              </CDBListGroupItem>\\n            </CDBListGroup>\\n    </CDBContainer>\\n  );\\n};\\nexport default  LIstGroup;\\n\")), mdx(\"h2\", null, \"Label\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"list-group\",\n    style: {\n      \"width\": \"28rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"list-group-item d-flex justify-content-between align-items-center\"\n  }, \"List Group\", mdx(\"div\", {\n    className: \"badge bg-primary\"\n  }, \"19\")), mdx(\"div\", {\n    className: \"list-group-item d-flex justify-content-between align-items-center\"\n  }, \"List Group\", mdx(\"div\", {\n    className: \"badge bg-secondary\"\n  }, \"19\")), mdx(\"div\", {\n    className: \"list-group-item d-flex justify-content-between align-items-center\"\n  }, \"List Group\", mdx(\"div\", {\n    className: \"badge bg-success\"\n  }, \"19\")), mdx(\"div\", {\n    className: \"list-group-item d-flex justify-content-between align-items-center\"\n  }, \"List Group\", mdx(\"div\", {\n    className: \"badge bg-danger\"\n  }, \"19\")), mdx(\"div\", {\n    className: \"list-group-item d-flex justify-content-between align-items-center\"\n  }, \"List Group\", mdx(\"div\", {\n    className: \"badge bg-info\"\n  }, \"19\")), mdx(\"div\", {\n    className: \"list-group-item d-flex justify-content-between align-items-center\"\n  }, \"List Group\", mdx(\"div\", {\n    className: \"badge bg-warning\"\n  }, \"19\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBListGroup, CDBListGroupItem, CDBBadge, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst LIstGroup = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBListGroup style={{ width: \\\"30rem\\\" }}>\\n              <CDBListGroupItem className=\\\"d-flex justify-content-between align-items-center\\\">\\n                List Group <CDBBadge color=\\\"primary\\\">19</CDBBadge>\\n              </CDBListGroupItem>\\n              <CDBListGroupItem className=\\\"d-flex justify-content-between align-items-center\\\">\\n                List Group\\n                <CDBBadge color=\\\"secondary\\\">19</CDBBadge>\\n              </CDBListGroupItem>\\n              <CDBListGroupItem className=\\\"d-flex justify-content-between align-items-center\\\">\\n                List Group\\n                <CDBBadge color=\\\"success\\\">19</CDBBadge>\\n              </CDBListGroupItem>\\n              <CDBListGroupItem className=\\\"d-flex justify-content-between align-items-center\\\">\\n                List Group\\n                <CDBBadge color=\\\"danger\\\">19</CDBBadge>\\n              </CDBListGroupItem>\\n              <CDBListGroupItem className=\\\"d-flex justify-content-between align-items-center\\\">\\n                List Group<CDBBadge color=\\\"info\\\">19</CDBBadge>\\n              </CDBListGroupItem>\\n              <CDBListGroupItem className=\\\"d-flex justify-content-between align-items-center\\\">\\n                List Group<CDBBadge color=\\\"warning\\\">19</CDBBadge>\\n              </CDBListGroupItem>\\n            </CDBListGroup>\\n    </CDBContainer>\\n  );\\n};\\nexport default  LIstGroup;\\n\")), mdx(\"h2\", null, \"Color List Group\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"ul\", {\n    className: \"list-group\",\n    style: {\n      \"width\": \"28rem\"\n    }\n  }, mdx(\"li\", {\n    className: \"list-group-item list-group-item-primary\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item list-group-item-secondary\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item list-group-item-success\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item list-group-item-danger\"\n  }, \"List Group\"), mdx(\"li\", {\n    className: \"list-group-item list-group-item-info\"\n  }, \"List Group Link\"), mdx(\"li\", {\n    className: \"list-group-item list-group-item-warning\"\n  }, \"List Group\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBListGroup, CDBListGroupItem, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst LIstGroup = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBListGroup style={{ width: \\\"30rem\\\" }}>\\n              <CDBListGroupItem color=\\\"primary\\\">List Group </CDBListGroupItem>\\n              <CDBListGroupItem color=\\\"secondary\\\">List Group</CDBListGroupItem>\\n              <CDBListGroupItem color=\\\"success\\\">List Group</CDBListGroupItem>\\n              <CDBListGroupItem color=\\\"danger\\\">List Group</CDBListGroupItem>\\n              <CDBListGroupItem color=\\\"info\\\">List Group Link</CDBListGroupItem>\\n              <CDBListGroupItem color=\\\"warning\\\">List Group</CDBListGroupItem>\\n            </CDBListGroup>\\n    </CDBContainer>\\n  );\\n};\\nexport default  LIstGroup;\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Icons\"), mdx(Link, {\n    to: \"/product/contrast-pro\",\n    mdxType: \"Link\"\n  }, mdx(CDBBadge, {\n    size: \"large\",\n    className: \"badge-pro\",\n    mdxType: \"CDBBadge\"\n  }, \"Pro Component\")), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"list-group\",\n    style: {\n      \"width\": \"28rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"list-group-item d-flex align-items-center\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook px-3\"\n  }), \"List Group\"), mdx(\"div\", {\n    className: \"list-group-item d-flex align-items-center\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook fa-2x px-3\"\n  }), \"List Group\"), mdx(\"div\", {\n    className: \"list-group-item d-flex align-items-center\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook fa-2x px-3\"\n  }), \"List Group\"), mdx(\"div\", {\n    className: \"list-group-item d-flex align-items-center\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook fa-2x px-3\"\n  }), \"List Group\"), mdx(\"div\", {\n    className: \"list-group-item d-flex align-items-center\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook fa-2x px-3\"\n  }), \"List Group\"), mdx(\"div\", {\n    className: \"list-group-item d-flex align-items-center\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook fa-2x px-3\"\n  }), \"List Group\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBListGroup, CDBListGroupItem, CDBIcon, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst LIstGroup = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBListGroup style={{ width: \\\"30rem\\\" }}>\\n              <CDBListGroupItem>\\n                <CDBIcon fab icon=\\\"facebook\\\" className=\\\"mr-3\\\" />\\n                List Group\\n              </CDBListGroupItem>\\n              <CDBListGroupItem>\\n                <CDBIcon fab icon=\\\"facebook\\\" size=\\\"2x\\\" className=\\\"mr-3\\\" />\\n                List Group\\n              </CDBListGroupItem>\\n              <CDBListGroupItem>\\n                <CDBIcon fab icon=\\\"facebook\\\" size=\\\"2x\\\" className=\\\"mr-3\\\" />\\n                List Group\\n              </CDBListGroupItem>\\n              <CDBListGroupItem>\\n                <CDBIcon fab icon=\\\"facebook\\\" size=\\\"2x\\\" className=\\\"mr-3\\\" />\\n                List Group\\n              </CDBListGroupItem>\\n              <CDBListGroupItem>\\n                <CDBIcon fab icon=\\\"facebook\\\" size=\\\"2x\\\" className=\\\"mr-3\\\" />\\n                List Group\\n              </CDBListGroupItem>\\n              <CDBListGroupItem>\\n                <CDBIcon fab icon=\\\"facebook\\\" size=\\\"2x\\\" className=\\\"mr-3\\\" />\\n                List Group\\n              </CDBListGroupItem>\\n            </CDBListGroup>\\n    </CDBContainer>\\n  );\\n};\\nexport default  LIstGroup;\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the LIstGroup component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast LIstGroup Import Statement\"), mdx(\"p\", null, \"You need to import the proper Contrast components first.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBListGroup, CDBListGroupItem, CDBContainer } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast LIstGroup Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBLIstGroup 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  }), \"<CDBLIstGroup className=\\\"myClass\\\" ... />\")), 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  }), \"function or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"ul\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default input tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBLIstGroup tag=\\\"ul\\\" ... />\")))), mdx(\"p\", null, \"API Reference: Contrast LIstGroupItem Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBLIstGroupItem 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  }), \"<CDBLIstGroupItem className=\\\"myClass\\\" ... />\")), 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  }), \"function or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"li\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default input tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBLIstGroupItem tag=\\\"li\\\" ... />\")), 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 default active state to item\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBLIstGroupItem active .../>\")), 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  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes Item background and text color, accepts \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"[\\\"primary\\\", \\\"default\\\", \\\"secondary\\\", \\\"success\\\", \\\"dark\\\", \\\"danger\\\", \\\"info\\\", \\\"warning\\\", \\\"white\\\" ]\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBLIstGroupItem color=\\\"primary\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"disable\"), 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 item from being clicked\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBLIstGroupItem disabled .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"hover\"), 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 hover effect (slightly background color change)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBLIstGroupItem hover .../>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#listgroup","title":"ListGroup","items":[{"url":"#examples","title":"Examples"},{"url":"#list-group-as-link","title":"List Group as Link"},{"url":"#label","title":"Label"},{"url":"#color-list-group","title":"Color List Group"},{"url":"#icons","title":"Icons"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-listgroup-import-statement","title":"Contrast LIstGroup Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/listgroup.mdx"},"frontmatter":{"metaTitle":"LIstGroup Component for Contrast Bootstrap React","metaDescription":"Building a LIstGroup 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":"13211923-81b3-51f3-b43e-766af2293fdc"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}