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.
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.
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.
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.
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.