component---src-pages-components-badge-mdx-9fb7922853cfd308bdbe.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{1131:function(e,n){e.exports='<div>\n  <h1>\n    Example heading <Badge variant="secondary">New</Badge>\n  </h1>\n  <h2>\n    Example heading <Badge variant="secondary">New</Badge>\n  </h2>\n  <h3>\n    Example heading <Badge variant="secondary">New</Badge>\n  </h3>\n  <h4>\n    Example heading <Badge variant="secondary">New</Badge>\n  </h4>\n  <h5>\n    Example heading <Badge variant="secondary">New</Badge>\n  </h5>\n  <h6>\n    Example heading <Badge variant="secondary">New</Badge>\n  </h6>\n</div>;\n'},1132:function(e,n){e.exports='<Button variant="primary">\n  Profile <Badge variant="light">9</Badge>\n  <span className="sr-only">unread messages</span>\n</Button>;\n'},1133:function(e,n){e.exports='<div>\n  <Badge pill variant="primary">\n    Primary\n  </Badge>\n  <Badge pill variant="secondary">\n    Secondary\n  </Badge>\n  <Badge pill variant="success">\n    Success\n  </Badge>\n  <Badge pill variant="danger">\n    Danger\n  </Badge>\n  <Badge pill variant="warning">\n    Warning\n  </Badge>\n  <Badge pill variant="info">\n    Info\n  </Badge>\n  <Badge pill variant="light">\n    Light\n  </Badge>\n  <Badge pill variant="dark">\n    Dark\n  </Badge>\n</div>;\n'},1134:function(e,n){e.exports='<div>\n  <Badge variant="primary">Primary</Badge>\n  <Badge variant="secondary">Secondary</Badge>\n  <Badge variant="success">Success</Badge>\n  <Badge variant="danger">Danger</Badge>\n  <Badge variant="warning">Warning</Badge>\n  <Badge variant="info">Info</Badge>\n  <Badge variant="light">Light</Badge>\n  <Badge variant="dark">Dark</Badge>\n</div>;\n'},248:function(e,n,t){"use strict";t.r(n),t.d(n,"query",function(){return y}),t.d(n,"_frontmatter",function(){return E});var a=t(50),r=t.n(a),o=t(0),i=t.n(o),l=t(121),c=t(298),s=t(295),u=t(312),p=t(1131),d=t.n(p),m=t(1132),g=t.n(m),f=t(1133),v=t.n(f),b=t(1134),h=t.n(b),y="810844139";n.default=function(e){var n=e.components,t=r()(e,["components"]);return i.a.createElement(l.MDXTag,{name:"wrapper",Layout:c.a,layoutProps:t,components:n},i.a.createElement(l.MDXTag,{name:"h1",components:n,props:{id:"badges"}},"Badges"),i.a.createElement(l.MDXTag,{name:"p",components:n},"Badges scale to match the size of the immediate parent element by\nusing relative font sizing and em units."),i.a.createElement(u.a,{codeText:d.a}),i.a.createElement(l.MDXTag,{name:"p",components:n},"Badges can be used as part of links or buttons to provide a counter."),i.a.createElement(u.a,{codeText:g.a}),i.a.createElement(l.MDXTag,{name:"p",components:n},"Note that depending on how they are used, badges may be confusing for\nusers of screen readers and similar assistive technologies. While the\nstyling of badges provides a visual cue as to their purpose, these users\nwill simply be presented with the content of the badge. Depending on the\nspecific situation, these badges may seem like random additional words or\nnumbers at the end of a sentence, link, or button. Unless the context is\nclear, consider including additional context with a visually hidden piece\nof additional text. ## Contextual variations Add any of the below\nmentioned modifier classes to change the appearance of a badge."),i.a.createElement(u.a,{codeText:h.a}),i.a.createElement(l.MDXTag,{name:"h2",components:n,props:{id:"pill"}},"Pill"),i.a.createElement(l.MDXTag,{name:"p",components:n},"badges Use the ",i.a.createElement(l.MDXTag,{name:"inlineCode",components:n,parentName:"p"},"pill")," modifier class to make badges more rounded\n(with a larger ",i.a.createElement(l.MDXTag,{name:"inlineCode",components:n,parentName:"p"},"border-radius")," and additional horizontal ",i.a.createElement(l.MDXTag,{name:"inlineCode",components:n,parentName:"p"},"padding"),").\nUseful if you miss the badges from v3."),i.a.createElement(u.a,{codeText:v.a}),i.a.createElement(l.MDXTag,{name:"h2",components:n,props:{id:"api"}},"API"),i.a.createElement(s.a,{metadata:t.data.metadata}))};var E={}},264:function(e,n,t){var a=t(12).f,r=Function.prototype,o=/^\s*function ([^ (]*)/;"name"in r||t(13)&&a(r,"name",{configurable:!0,get:function(){try{return(""+this).match(o)[1]}catch(e){return""}}})},270:function(e){e.exports={name:"react-bootstrap",version:"1.0.0-beta.4",description:"Bootstrap 3 components built with React",repository:{type:"git",url:"react-bootstrap/react-bootstrap"},homepage:"https://react-bootstrap.github.io/",sideEffects:!1,main:"lib/index.js",module:"es/index.js",scripts:{bootstrap:"yarn && yarn --cwd www",build:"node tools/build.js","build-docs":"yarn --cwd www run build",start:"yarn --cwd www run develop","ci-lint":'eslint --rule "prettier/prettier: 2"',format:"npm run ci-lint . -- --fix",lint:"npm run ci-lint .",precommit:"lint-staged",release:"rollout",prepublishOnly:"npm run build",tdd:"karma start",test:"npm run lint && npm run dtslint && npm run test-browser && npm run test-node","test-browser":"cross-env NODE_ENV=test karma start --single-run","test-node":"cross-env NODE_ENV=test-server mocha --require @babel/register test/server/*Spec.js",storybook:"start-storybook -p 6006","build-storybook":"build-storybook",dtslint:"dtslint types"},"lint-staged":{"*.js":["npm run ci-lint -- --fix","git add"]},prettier:{singleQuote:!0,trailingComma:"all"},files:["CHANGELOG.md","lib","dist","es"],keywords:["react","ecosystem-react","react-component","bootstrap"],author:"Stephen J. Collings <[email protected]>",license:"MIT",peerDependencies:{react:">=16.3.0","react-dom":">=16.3.0"},devDependencies:{"@4c/rollout":"^1.2.0","@babel/cli":"^7.2.0","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.2.1","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","@storybook/react":"^3.4.8","@types/react":"^16.7.13","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.4","babel-plugin-add-module-exports":"^1.0.0","babel-plugin-dev-expression":"^0.2.1","babel-plugin-istanbul":"^5.1.0","babel-plugin-transform-react-remove-prop-types":"^0.4.21",chai:"^4.2.0",chalk:"^2.3.2",codecov:"^3.1.0",colors:"^1.3.3","cpy-cli":"^2.0.0","create-react-class":"^15.6.3","cross-env":"^5.2.0",dtslint:"^0.4.1",enzyme:"^3.8.0","enzyme-adapter-react-16":"^1.7.1",eslint:"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-config-prettier":"^3.3.0","eslint-import-resolver-webpack":"^0.10.1","eslint-plugin-import":"^2.13.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-mocha":"^5.1.0","eslint-plugin-prettier":"^3.0.0","eslint-plugin-react":"^7.10.0",execa:"^1.0.0","fs-extra":"^7.0.1",husky:"^1.3.0",karma:"^3.1.4","karma-chrome-launcher":"^2.2.0","karma-cli":"^2.0.0","karma-coverage":"^1.1.2","karma-firefox-launcher":"^1.0.0","karma-mocha":"^1.1.1","karma-mocha-reporter":"^2.0.4","karma-sinon-chai":"^2.0.2","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^3.0.5","lint-staged":"^8.1.0",lodash:"^4.17.11",mocha:"^5.2.0",prettier:"^1.15.3",react:"^16.6.3","react-dom":"^16.6.3","react-test-renderer":"^16.6.3","release-script":"^1.0.2",sinon:"^7.2.2","sinon-chai":"^3.3.0",typescript:"^3.2.2",webpack:"^4.28.0"},dependencies:{"@babel/runtime":"^7.2.0","@react-bootstrap/react-popper":"1.2.1",classnames:"^2.2.6","dom-helpers":"^3.4.0",invariant:"^2.2.3",keycode:"^2.1.2","popper.js":"^1.14.6","prop-types":"^15.6.2","prop-types-extra":"^1.1.0","react-context-toolbox":"^2.0.2","react-overlays":"^1.0.0","react-prop-types":"^0.4.0","react-transition-group":"^2.5.1",uncontrollable:"^6.0.0",warning:"^4.0.1"},"release-script":{bowerRepo:"[email protected]:react-bootstrap/react-bootstrap-bower.git",docsRepo:"[email protected]:react-bootstrap/react-bootstrap.github.io.git",docsRoot:"www/public/"}}},271:function(e,n,t){var a=t(116)(function(e,n,t){return e+(t?"-":"")+n.toLowerCase()});e.exports=a},272:function(e,n,t){e.exports={link:"LinkToSource-Link-module--link--3LrCN"}},273:function(e,n,t){var a=t(274),r=t(276),o=t(283),i=t(290),l=o(function(e,n){if(null==e)return[];var t=n.length;return t>1&&i(e,n[0],n[1])?n=[]:t>2&&i(n[0],n[1],n[2])&&(n=[n[0]]),r(e,a(n,1),[])});e.exports=l},274:function(e,n,t){var a=t(304),r=t(275);e.exports=function e(n,t,o,i,l){var c=-1,s=n.length;for(o||(o=r),l||(l=[]);++c<s;){var u=n[c];t>0&&o(u)?t>1?e(u,t-1,o,i,l):a(l,u):i||(l[l.length]=u)}return l}},275:function(e,n,t){var a=t(47),r=t(305),o=t(114),i=a?a.isConcatSpreadable:void 0;e.exports=function(e){return o(e)||r(e)||!!(i&&e&&e[i])}},276:function(e,n,t){var a=t(117),r=t(306),o=t(277),i=t(280),l=t(303),c=t(281),s=t(263);e.exports=function(e,n,t){var u=-1;n=a(n.length?n:[s],l(r));var p=o(e,function(e,t,r){return{criteria:a(n,function(n){return n(e)}),index:++u,value:e}});return i(p,function(e,n){return c(e,n,t)})}},277:function(e,n,t){var a=t(278),r=t(262);e.exports=function(e,n){var t=-1,o=r(e)?Array(e.length):[];return a(e,function(e,a,r){o[++t]=n(e,a,r)}),o}},278:function(e,n,t){var a=t(308),r=t(279)(a);e.exports=r},279:function(e,n,t){var a=t(262);e.exports=function(e,n){return function(t,r){if(null==t)return t;if(!a(t))return e(t,r);for(var o=t.length,i=n?o:-1,l=Object(t);(n?i--:++i<o)&&!1!==r(l[i],i,l););return t}}},280:function(e,n){e.exports=function(e,n){var t=e.length;for(e.sort(n);t--;)e[t]=e[t].value;return e}},281:function(e,n,t){var a=t(282);e.exports=function(e,n,t){for(var r=-1,o=e.criteria,i=n.criteria,l=o.length,c=t.length;++r<l;){var s=a(o[r],i[r]);if(s)return r>=c?s:s*("desc"==t[r]?-1:1)}return e.index-n.index}},282:function(e,n,t){var a=t(115);e.exports=function(e,n){if(e!==n){var t=void 0!==e,r=null===e,o=e==e,i=a(e),l=void 0!==n,c=null===n,s=n==n,u=a(n);if(!c&&!u&&!i&&e>n||i&&l&&s&&!c&&!u||r&&l&&s||!t&&s||!o)return 1;if(!r&&!i&&!u&&e<n||u&&t&&o&&!r&&!i||c&&t&&o||!l&&o||!s)return-1}return 0}},283:function(e,n,t){var a=t(263),r=t(284),o=t(286);e.exports=function(e,n){return o(r(e,n,a),e+"")}},284:function(e,n,t){var a=t(285),r=Math.max;e.exports=function(e,n,t){return n=r(void 0===n?e.length-1:n,0),function(){for(var o=arguments,i=-1,l=r(o.length-n,0),c=Array(l);++i<l;)c[i]=o[n+i];i=-1;for(var s=Array(n+1);++i<n;)s[i]=o[i];return s[n]=t(c),a(e,this,s)}}},285:function(e,n){e.exports=function(e,n,t){switch(t.length){case 0:return e.call(n);case 1:return e.call(n,t[0]);case 2:return e.call(n,t[0],t[1]);case 3:return e.call(n,t[0],t[1],t[2])}return e.apply(n,t)}},286:function(e,n,t){var a=t(287),r=t(289)(a);e.exports=r},287:function(e,n,t){var a=t(288),r=t(311),o=t(263),i=r?function(e,n){return r(e,"toString",{configurable:!0,enumerable:!1,value:a(n),writable:!0})}:o;e.exports=i},288:function(e,n){e.exports=function(e){return function(){return e}}},289:function(e,n){var t=800,a=16,r=Date.now;e.exports=function(e){var n=0,o=0;return function(){var i=r(),l=a-(i-o);if(o=i,l>0){if(++n>=t)return arguments[0]}else n=0;return e.apply(void 0,arguments)}}},290:function(e,n,t){var a=t(302),r=t(262),o=t(307),i=t(299);e.exports=function(e,n,t){if(!i(t))return!1;var l=typeof n;return!!("number"==l?r(t)&&o(n,t.length):"string"==l&&n in t)&&a(t[n],e)}},291:function(e,n,t){e.exports={code:"PropTable-Code-module--code--FStF3"}},292:function(e,n,t){e.exports={propDescription:"PropTable-PropDescription-module--prop-description--WLXmy"}},293:function(e,n,t){e.exports={keyword:"ComponentApi-Keyword-module--keyword--1daqk"}},294:function(e,n,t){e.exports={code:"ComponentApi-Code-module--code--3OYmz"}},295:function(e,n,t){"use strict";t(118),t(264);var a=t(271),r=t.n(a),o=t(0),i=t.n(o),l=t(28),c=t.n(l),s=t(49),u=t(79),p=t(300),d=t(301),m=t(270),g=c()("a",null,"Link",t(272),"link","link"),f=function(e){var n=e.component,t="//github.com/react-bootstrap/react-bootstrap/tree/v"+m.version+"/src/"+n+".js";return i.a.createElement(p.a,{overlay:i.a.createElement(d.a,{id:"view-"+n+"-source-tooltip"},"View source file")},i.a.createElement(g,{href:t,className:"js-search-exclude"},i.a.createElement("i",{className:"fas fa-code"}),i.a.createElement("span",{className:"sr-only"},"view source file")))},v=(t(78),t(5)),b=t.n(v),h=(t(48),t(273)),y=t.n(h),E=t(119),x=t.n(E),w=t(1),B=t.n(w),k=t(309),N=t(310),D=c()("code",null,"Code",t(291),"code","code"),T=c()("div",null,"PropDescription",t(292),"prop-description","propDescription");function C(e){return e.trim().replace(/^\{/,"").replace(/\}$/,"")}function M(e){return"func"===e?"function":"bool"===e?"boolean":e}var j=function(e){function n(){return e.apply(this,arguments)||this}b()(n,e);var t=n.prototype;return t.getType=function(e){var n=this,t=e.type||{},a=M(t.name),r=e.doclets||{};switch(a){case"object":return a;case"union":return t.value.reduce(function(e,t,a,r){var o=n.getType({type:t});return i.a.isValidElement(o)&&(o=i.a.cloneElement(o,{key:a})),e=e.concat(o),a===r.length-1?e:e.concat(" | ")},[]);case"array":var o=this.getType({type:t.value});return i.a.createElement("span",null,"array<",o,">");case"enum":return this.renderEnum(t);case"custom":return C(r.type||t.raw);default:return a}},t._renderRows=function(e){var n=this;return y()(e,function(e){return"bsPrefix"===e.name?"zzzzzz":e.name}).filter(function(e){return e.type&&!e.doclets.private&&!e.doclets.ignore}).map(function(e){var t=e.name,a=e.description,r=e.doclets,o=a&&a.childMarkdownRemark.html;return i.a.createElement("tr",{key:t,className:"prop-table-row"},i.a.createElement("td",{className:"text-monospace"},t," ",n.renderRequiredBadge(e)),i.a.createElement("td",{className:"text-monospace"},i.a.createElement("div",null,n.getType(e))),i.a.createElement("td",null,n.renderDefaultValue(e)),i.a.createElement("td",null,r.deprecated&&i.a.createElement("div",{className:"mb-1"},i.a.createElement("strong",{className:"text-danger"},"Deprecated: "+r.deprecated+" ")),n.renderControllableNote(e,t),i.a.createElement(T,{dangerouslySetInnerHTML:{__html:o}})))})},t.renderDefaultValue=function(e){var n=e.defaultValue&&e.defaultValue.value;return null==n?null:("elementType"===function(e){var n=e.type||{},t=M(n.name),a=e.doclets||{};return"custom"===t?C(a.type||n.raw):t}(e)&&(n="<"+n.replace(/('|")/g,"")+">"),i.a.createElement(D,null,n))},t.renderControllableNote=function(e,n){var t=e.doclets.controllable,a="function"===M(e.type.name);if(!t)return!1;var r=a?i.a.createElement("span",null,"controls ",i.a.createElement("code",null,t)):i.a.createElement("span",null,"controlled by: ",i.a.createElement(D,null,t),", initial prop:"," ",i.a.createElement(D,null,"default"+x()(n)));return i.a.createElement("div",{className:"mb-2"},i.a.createElement("small",null,i.a.createElement("em",{className:"text-info"},r)))},t.renderEnum=function(e){var n=e.value||[];if(!Array.isArray(n))return n;var t=[];return n.forEach(function(e,n){var a=e.value;n>0&&t.push(i.a.createElement("span",{key:n+"c"}," | ")),t.push(i.a.createElement("code",{key:n},a))}),i.a.createElement("span",null,t)},t.renderRequiredBadge=function(e){return e.required?i.a.createElement(k.a,null,"required"):null},t.render=function(){var e=this.props.metadata.props||[];return e.length?i.a.createElement(N.a,{bordered:!0,striped:!0,className:"bg-white mt-4 mb-5",responsive:"sm"},i.a.createElement("thead",null,i.a.createElement("tr",null,i.a.createElement("th",null,"Name"),i.a.createElement("th",null,"Type"),i.a.createElement("th",null,"Default"),i.a.createElement("th",null,"Description"))),i.a.createElement("tbody",null,this._renderRows(e))):i.a.createElement("div",{className:"text-muted"},i.a.createElement("em",null,"There are no public props for this component."))},n}(i.a.Component);j.propTypes={metadata:B.a.object.isRequired};var z=j,L=c()("span",null,"Keyword",t(293),"keyword","keyword"),S=c()("code",null,"Code",t(294),"code","code"),X=function(e){var n=e.name;return i.a.createElement(S,{"aria-label":"Import code for the "+n+" component"},i.a.createElement(L,null,"import")," ",n," ",i.a.createElement(L,null,"from")," ","'react-bootstrap/lib/",n,"'")};function P(e){var n=e.heading,t=e.metadata,a=e.exportedBy,o=t.description,l=t.displayName,c=o&&o.childMarkdownRemark.html,p=l;a&&(l=a.displayName+"."+l.split(a.displayName).pop(),p=a.displayName);var d=r()(l)+"-props";return i.a.createElement(i.a.Fragment,null,i.a.createElement(s.default,{h:n||"3",id:d,title:l,className:"my-3"},i.a.createElement("div",{className:"d-flex align-items-center"},i.a.createElement(u.a,{target:d},i.a.createElement("span",{className:" text-monospace"},l)),i.a.createElement("span",{className:"ml-auto"}),i.a.createElement(f,{component:l}))),i.a.createElement(X,{name:p}),c&&i.a.createElement("div",{dangerouslySetInnerHTML:{__html:c}}),i.a.createElement(z,{metadata:t}))}P.propTypes={};n.a=P}}]);
//# sourceMappingURL=component---src-pages-components-badge-mdx-9fb7922853cfd308bdbe.js.map