Badges

Scale to parent

Heading New

import React from 'react';
import { Badge } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <h1>Heading <Badge color="secondary">New</Badge></h1>
      <h2>Heading <Badge color="secondary">New</Badge></h2>
      <h3>Heading <Badge color="secondary">New</Badge></h3>
      <h4>Heading <Badge color="secondary">New</Badge></h4>
      <h5>Heading <Badge color="secondary">New</Badge></h5>
      <h6>Heading <Badge color="secondary">New</Badge></h6>
    </div>
  );
}

export default Example;

Badges can be used as part of links or buttons to provide a counter.

import React from 'react';
import { Badge, Button } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <Button color="primary" outline>
        Notifications <Badge color="secondary">4</Badge>
      </Button>
    </div>
  );
}

export default Example;

Contextual variations

PrimarySecondarySuccessDangerWarningInfoLightDark

import React from 'react';
import { Badge } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <Badge color="primary">Primary</Badge>
      <Badge color="secondary">Secondary</Badge>
      <Badge color="success">Success</Badge>
      <Badge color="danger">Danger</Badge>
      <Badge color="warning">Warning</Badge>
      <Badge color="info">Info</Badge>
      <Badge color="light">Light</Badge>
      <Badge color="dark">Dark</Badge>
    </div>
  );

}

export default Example;

Pills

PrimarySecondarySuccessDangerWarningInfoLightDark

import React from 'react';
import { Badge } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <Badge color="primary" pill>Primary</Badge>
      <Badge color="secondary" pill>Secondary</Badge>
      <Badge color="success" pill>Success</Badge>
      <Badge color="danger" pill>Danger</Badge>
      <Badge color="warning" pill>Warning</Badge>
      <Badge color="info" pill>Info</Badge>
      <Badge color="light" pill>Light</Badge>
      <Badge color="dark" pill>Dark</Badge>
    </div>
  );
}

export default Example;

Links

Adding the href prop (without specifying a tag prop) will default the badge to a link.

Primary Secondary Success Danger Warning Info Light Dark

import React from 'react';
import { Badge } from 'reactstrap';

const Example = (props) => {
  return (
    <div>
      <Badge href="#" color="primary">Primary</Badge>
      <Badge href="#" color="secondary">Secondary</Badge>
      <Badge href="#" color="success">Success</Badge>
      <Badge href="#" color="danger">Danger</Badge>
      <Badge href="#" color="warning">Warning</Badge>
      <Badge href="#" color="info">Info</Badge>
      <Badge href="#" color="light">Light</Badge>
      <Badge href="#" color="dark">Dark</Badge>
    </div>
  );
}

export default Example;

Components