Badges
Use this badge as elements to show counts or labels separately or inside other components.
The badge component is commonly used to complement other elements such as buttons or text elements to become a label or to show the data counter, such as the number of comments, etc.
As an alternative, badges can also be used as standalone elements that link to particular pages by using anchor elements instead of span.
Overviews #
These are some overviews of the badges. Use the options to switch between various styles and variants.
Badges
Basic Usage #
You only need an element with a badge class to create a badge.
Color Schemes #
To change the color schemes, use Skewind's scheme-{color} utility classes. You can also switch to a softer scheme by appending the badge--soft class to the alert element. Take a look at these examples:
Badge Variants #
The badge variant is badge--default by default just like the above examples. We provide a few more variants that are listed below. Append badge--{style} class to set button variant.
Outline
badge--outline
Softer Outline
badge--outline badge--soft
Flat
badge--flat
Softer Flat
badge--flat badge--soft
More Examples #
With Icons #
Let's add some icons to make it look more interesting. Wrap the badge text with an element. And finally, add the icon element as the first or/and last child of the badge. For example:
Icon Only #
Sometimes you need a badge as a label using only an icon. Use the badge--icon class.
With Dot #
You can even attach the dot to the badge element if you prefer to. Use the badge--dot class.
Within Button #
Use the badge as a counter to complement the button. Checkout the example code.
As an Icon Badge #
Use the badge as a counter to complement the icons. Checkout the example code.
Badge Pills #
You can also use the TailwindCSS rounded-full utility to make pill-shaped buttons.