Badge

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

Variants

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

Badge Variants
Primary
 
Secondary
 
Light
 
Dark
 
Info
 
Sucess
 
Warning
 
Danger

Sizes

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
Small
 
Medium
 
Large

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

Badge Heading Sizes

Heading 1
New

Heading 2
New

Heading 3
New

Heading 4
New

Heading 5
New
Heading 6
New

API

Badge API <i-badge>
Property Description Type Accepted Default
size Sets the size of the badge component. String sm, md, lg md
variant Sets the color variant of the badge component. String primary, secondary, light, dark, success, danger, warning, info primary