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.

<i-badge variant="primary">Primary</i-badge>

<i-badge variant="secondary">Secondary</i-badge>

<i-badge variant="light">Light</i-badge>

<i-badge variant="dark">Dark</i-badge>

<i-badge variant="info">Info</i-badge>

<i-badge variant="success">Success</i-badge>

<i-badge variant="warning">Warning</i-badge>

<i-badge variant="danger">Danger</i-badge>

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.

<i-badge size="sm">Small</i-badge>

<i-badge size="md">Medium</i-badge>

<i-badge size="lg">Large</i-badge>

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

<h1>Heading 1 <i-badge variant="primary">New</i-badge></h1>

<h2>Heading 2 <i-badge variant="primary">New</i-badge></h2>

<h3>Heading 3 <i-badge variant="primary">New</i-badge></h3>

<h4>Heading 4 <i-badge variant="primary">New</i-badge></h4>

<h5>Heading 5 <i-badge variant="primary">New</i-badge></h5>

<h6>Heading 6 <i-badge variant="primary">New</i-badge></h6>

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.

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

(
    primary: $badge-variant-primary,
    secondary: $badge-variant-secondary,
    light: $badge-variant-light,
    dark: $badge-variant-dark,
    info: $badge-variant-info,
    success: $badge-variant-success,
    warning: $badge-variant-warning,
    danger: $badge-variant-danger
)

@function badge-variant($variant) {
    $badge-variant-background: $variant;
    $badge-variant-color: variant-color-by-luminance($variant, $badge-color-for-light-variant, $badge-color-for-dark-variant);

    $variant-map: (
        background: $badge-variant-background,
        color: $badge-variant-color
    );

    @return $variant-map;
}