# Badge
Badge can be used to add labeling or indication to other ui components.
# Simple badges
You can provide type
prop with one of the theme color names to customize the colors of badge
A default badge A primary badge A secondary badge A success badge A info badge A warning badge A danger badge A light badge
<badge type="default">A default badge</badge>
<badge type="primary">A primary badge</badge>
<badge type="secondary">A secondary badge</badge>
<badge type="success">A success badge</badge>
<badge type="info">A info badge</badge>
<badge type="warning">A warning badge</badge>
<badge type="danger">A danger badge</badge>
<badge type="light">A light badge</badge>
# Pill badges
To make badge corners rounded add pill
property to component
A default badge A primary badge A secondary badge A success badge A info badge A warning badge A danger badge A light badge
<badge pill type="default">A default badge</badge>
<badge pill type="primary">A primary badge</badge>
<badge pill type="secondary">A secondary badge</badge>
<badge pill type="success">A success badge</badge>
<badge pill type="info">A info badge</badge>
<badge pill type="warning">A warning badge</badge>
<badge pill type="danger">A danger badge</badge>
<badge pill type="light">A light badge</badge>
# Badges with a link
Use link
property to pass a link for a badge. If link is provided badge will become a link (<a>).
A default badge A primary badge A secondary badge A success badge A info badge A warning badge A danger badge A light badge
<badge pill type="default" link="#">A default badge</badge>
<badge pill type="primary" link="#">A primary badge</badge>
<badge pill type="secondary" link="#">A secondary badge</badge>
<badge pill type="success" link="#">A success badge</badge>
<badge pill type="info" link="#">A info badge</badge>
<badge pill type="warning" link="#">A warning badge</badge>
<badge pill type="danger" link="#">A danger badge</badge>
<badge pill type="light" link="#">A light badge</badge>
# Inverse variation
Provide inverse
prop to get different colors for badge
A default badge A primary badge A secondary badge A success badge A info badge A warning badge A danger badge A light badge
<badge inverse type="default" link="#">A default badge</badge>
<badge inverse type="primary" link="#">A primary badge</badge>
<badge inverse type="secondary" link="#">A secondary badge</badge>
<badge inverse type="success" link="#">A success badge</badge>
<badge inverse type="info" link="#">A info badge</badge>
<badge inverse type="warning" link="#">A warning badge</badge>
<badge inverse type="danger" link="#">A danger badge</badge>
<badge inverse type="light" link="#">A light badge</badge>
# Props
name | default | description | required | type |
---|---|---|---|---|
type | primary | One of available bootstrap button types: primary, secondary, default, success, info, warning, danger | false | String |
link | Url of link, if link is provided the badge element will be set to <a> | false | String | |
pill | false | If pill prop is provided and set to true then .badge-pill class will be applied | false | Boolean |
inverse | false | If set to true .badge-inverse class will be added | false | Boolean |
← Alert Breadcrumb →