Badge component allows you to easily highlight new or unread items, label and categorize using keywords that describe them, notify users about some useful information and mark items depending on the priority. Badges don't have background color by default and require .bg-* color utility classes, some of them also require .text-* classes to match color contrast ratio.

Striped badge simulates a classic styling of tags from the old days. All color versions have consistent background color that is set with .bg-light color utility class, and since the default styling of badge element is very limited, the use of other utilities is required. You can control the width of left/right border and its color, as well as background and text colors. All is configurable.

Flat badges use background color with 20% opacity and corresponding text color. They don't require any custom class names as all styling is done via .bg-opacity-25 background opacity class, which also works well in dark theme. Depending on design choice, you can change opacity level from 20% to 10|25|50|75|100 by using utility classes.

Rounded badges is a classic style of numeric values, mostly used as counters. All badges have minimum width that equals badge height, which means the badge is displayed as a perfect circle if the value consists of 1 digit and grows horizontally. No custom badge classes are required, just use global .rounded-pill utility class in .badge element.