Reactstrap Badge

Documentation and examples for Bootstrap badges, our small count and labelling component.

Example

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

import React from "react";

// reactstrap components
import { Badge, Button } from "reactstrap";

function Example() {
  return (
    <>
      <Button color="default" type="button">
        <span>Unread messages</span>
        <Badge color="primary">24</Badge>
      </Button>
      <Button color="primary" type="button">
        <span>Notifications</span>
        <Badge
          className="badge-circle badge-floating border-white"
          color="danger"
          size="md"
        >
          4
        </Badge>
      </Button>
    </>
  );
}

export default Example;

Contextual variations

Add any of the below mentioned modifier props to change the appearance of a badge.

Default Primary Secondary Info Success Danger Warning

import React from "react";

// reactstrap components
import { Badge } from "reactstrap";

function Example() {
  return (
    <>
      
      <Badge color="default">Default</Badge>{" "}
      <Badge color="primary">Primary</Badge>{" "}
      <Badge color="secondary">Secondary</Badge>{" "}
      <Badge color="info">Info</Badge>{" "}
      <Badge color="success">Success</Badge>{" "}
      <Badge color="danger">Danger</Badge>{" "}
      <Badge color="warning">Warning</Badge>{" "}
    </>
  );
}

export default Example;

Pill badges

Use the pill modifier prop to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Default Primary Secondary Info Success Danger Warning

import React from "react";

// reactstrap components
import { Badge } from "reactstrap";

function Example() {
  return (
    <>
      
      <Badge pill color="default">Default</Badge>{" "}
      <Badge pill color="primary">Primary</Badge>{" "}
      <Badge pill color="secondary">Secondary</Badge>{" "}
      <Badge pill color="info">Info</Badge>{" "}
      <Badge pill color="success">Success</Badge>{" "}
      <Badge pill color="danger">Danger</Badge>{" "}
      <Badge pill color="warning">Warning</Badge>{" "}
    </>
  );
}

export default Example;

Links

If you want to render the Badge component as an anchor element, you just need to set a href attribute on them.

Default Primary Secondary Info Success Danger Warning

import React from "react";

// reactstrap components
import { Badge } from "reactstrap";

function Example() {
  return (
    <>
      
      <Badge href="#pablo" onClick={(e) => e.preventDefault()} color="default">Default</Badge>{" "}
      <Badge href="#pablo" onClick={(e) => e.preventDefault()} color="primary">Primary</Badge>{" "}
      <Badge href="#pablo" onClick={(e) => e.preventDefault()} color="secondary">Secondary</Badge>{" "}
      <Badge href="#pablo" onClick={(e) => e.preventDefault()} color="info">Info</Badge>{" "}
      <Badge href="#pablo" onClick={(e) => e.preventDefault()} color="success">Success</Badge>{" "}
      <Badge href="#pablo" onClick={(e) => e.preventDefault()} color="danger">Danger</Badge>{" "}
      <Badge href="#pablo" onClick={(e) => e.preventDefault()} color="warning">Warning</Badge>{" "}
    </>
  );
}

export default Example;

Sizes

Use the .badge-md or .badge-lg modifier classes to adjust badge sizes.

Default Medium Large badge

import React from "react";

// reactstrap components
import React from "react";

// reactstrap components
import { Badge } from "reactstrap";

function Example() {
  return (
    <>
      <Badge color="primary" pill>
        Default
      </Badge>
      <Badge className="badge-md" color="warning" pill>
        Medium
      </Badge>
      <Badge className="badge-lg" color="success" pill>
        Large badge
      </Badge>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.