Documentation and examples for badges, a small component used for counting and labeling.


Inkline includes several predefined badge styles, each serving its own semantic purpose, which you can control using the variant property.

Badge Variants


You're able to use the size modifier to control the text and spacing size of your badges, using one of the available sizes: sm, md, and lg. The default size is set to md.

Badge Sizes

Badges always match the size of the immediate parent element by using relative font sizing and em units.

Badge Heading Sizes

Component API

Here you can find a list of the customization options you can use for the badge component as props, as well as available slots.

Badge API

Sass Variables

Here you can find a list of the Sass variables you can use for the badge component. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

The {variant} placeholder below can be one of the following:

  • primary
  • secondary
  • light
  • dark
  • info
  • success
  • warning
  • danger