Example badge
Example badge with left aligned icon
Example badge with right aligned icon
General CSS for badges
display: inline-block;
min-width: 60px;
height: 24px;
padding: 0 8px;
font: 600 12px/24px Nunito, sans-serif;
border-radius: 3px;
}
Badge variations
You can also include icons in your badge, which have the same color, but less opacity.
Blue badges
Blue badge
Blue badge with left aligned icon
Blue badge with right aligned icon
Green badges
Green badge
Green badge with left aligned icon
Green badge with right aligned icon
Red badges
Red badge
Red badge with left aligned icon
Red badge with right aligned icon
Yellow badges
Yellow badge
Yellow badge with left aligned icon
Yellow badge with right aligned icon
Grey badges
Grey badge
Grey badge with left aligned icon
Grey badge with right aligned icon
Additional CSS for badges
color: #0275a7;
background: #ebfaff;
}
.badge.badge-green {
color: #007a74;
background: #e9fcf3;
}
.badge.badge-grey {
color: #415068;
background: #f4f7fa;
}
.badge.badge-red {
color: #c93154;
background: #fff3f4;
}
.badge.badge-yellow {
color: #ffca5a;
background: #fffbed;
}
.badge.icon .feather {
opacity: .7;
margin-top: -1px;
stroke-width: 2.5px;
}
.badge.icon.icon-left .feather {
margin-left: -1px;
padding: 0 4px 0 0;
}
.badge.icon.icon-right .feather {
margin-right: -1px;
padding: 0 0 0 4px;
}
Example usage
In this case, badges are used to display the difference between the last week of data vs. the week before. When used in a table row, the badges should all have the same width.
