content: import React from 'react';
  
  import Anchor from '../Anchor';
  import PropTable from '../PropTable';
  import ReactPlayground from '../ReactPlayground';
  import Samples from '../Samples';
  
  export default function BadgeSection() {
    return (
      <div className="bs-docs-section">
        <h2 className="page-header">
          <Anchor id="badges">Badges</Anchor> <small>Badge</small>
        </h2>
  
        <p>Easily highlight new or unread items by adding a <code>{"<Badge>"}</code> to links, Bootstrap navs, and more.</p>
        <ReactPlayground codeText={Samples.Badge} />
        <div className="bs-callout bs-callout-info">
          <h4>Cross-browser compatibility</h4>
          <p>Unlike in regular Bootstrap, badges self collapse even in Internet Explorer 8.</p>
        </div>
  
        <h3><Anchor id="badges-props">Props</Anchor></h3>
        <PropTable component="Badge" />
      </div>
    );
  }
  