Badge

@use '@natachah/vanilla-frontend/scss/components/badge'

Syntax

The badge is using a <span> tag with the class .badge.

html

<span class="badge">Badge</span>

css properties

--badge-color
--badge-background
--badge-border-size
--badge-border-style
--badge-border-color
--badge-border-radius
--badge-padding-inline
--badge-padding-block
--badge-font-size

Variants

The badges have multiple variations to play with.

Icon

You can add an <svg> icon inside the button.

<span class="badge">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8Z" /><path d="M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.495 3.495 0 0 0-.463-.315A2.19 2.19 0 0 0 8.25.064.546.546 0 0 0 8 0a.549.549 0 0 0-.266.073 2.312 2.312 0 0 0-.142.08 3.67 3.67 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635.85 0 1.7-.207 2.4-.635.067.03.132.056.196.083.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562l-1.499-1.83ZM12 10.445v.055c0 .866-.284 1.585-.75 2.14.146.064.292.13.425.199.39.197.8.46 1.1.86L13 14v-1.798a1.5 1.5 0 0 0-.327-.935L12 10.445ZM4.75 12.64C4.284 12.085 4 11.366 4 10.5v-.054l-.673.82a1.5 1.5 0 0 0-.327.936V14l.225-.3c.3-.4.71-.664 1.1-.861.133-.068.279-.135.425-.199ZM8.009 1.073c.063.04.14.094.226.163.284.226.683.621 1.09 1.28C10.137 3.836 11 6.237 11 10.5c0 .858-.374 1.48-.943 1.893C9.517 12.786 8.781 13 8 13c-.781 0-1.517-.214-2.057-.607C5.373 11.979 5 11.358 5 10.5c0-4.182.86-6.586 1.677-7.928.409-.67.81-1.082 1.096-1.32.09-.076.17-.135.236-.18Z" /><path d="M9.479 14.361c-.48.093-.98.139-1.479.139-.5 0-.999-.046-1.479-.139L7.6 15.8a.5.5 0 0 0 .8 0l1.079-1.439Z" /></svg>
    Badge
</span>

Size

You can adapte the size of the badges by changing their font-size.

By default the badge have a font-size set at .875em.

<span class="badge" style="font-size: .75em">Small</span>
            <span class="badge">Normal</span>
            <span class="badge" style="font-size: var(--font-size-large)">Large</span>

Outline

You can create an outline variation by enable the option and adding the class .outline.

html

<span class="badge outline">Badge</span>

scss

@use "@natachah/vanilla-frontend/scss/components/badge" with (
    $outline: true
);

Color

You can create some color variation by including the colors classes name into the import and then by adding the class as .{COLOR}.

html

<span class="badge primary">Primary</span>
<span class="badge outline primary">Outline</span>

scss

@use "@natachah/vanilla-frontend/scss/components/badge" with (
    $colors: ('primary'),
    $outline: true
);

Group

You can group some badges by putting them in a <div> with the class .group.

html

<div class="group">
    <span class="badge">Badge A</span>
    <span class="badge">Badge B</span>
    <span class="badge">Badge C</span>
</div>

scss

@use '@natachah/vanilla-frontend/scss/components/group';