Badges

A badge is like a digital sticker that adds a pop of information to your website. It's a tiny, yet mighty element that can display a variety of things, from a simple number to a status indicator. With a badge, you can easily highlight important details and make your website more engaging and informative.

Example

<h1>Example heading <span class="badge">New</span></h1>
<h2>Example heading <span class="badge">New</span></h2>
<h3>Example heading <span class="badge">New</span></h3>
<h4>Example heading <span class="badge">New</span></h4>
<h5>Example heading <span class="badge">New</span></h5>
<h6>Example heading <span class="badge">New</span></h6>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$badge: functions.get-theme(app.$theme, 'components.badge');

@include mixins.generate-component(
$badge,
"badge",
app.$config,
app.$theme
);

Inside button

<button type="button" class="btn btn-primary">
    Notifications <span class="badge">4</span>
</button>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$badge: functions.get-theme(app.$theme, 'components.badge');

@include mixins.generate-component(
$badge,
"badge",
app.$config,
app.$theme
);

Inside button

<button type="button" class="btn btn-primary">
    Profile <span class="badge">9</span>
    <span class="sr">unread messages</span>
</button>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$badge: functions.get-theme(app.$theme, 'components.badge');

@include mixins.generate-component(
$badge,
"badge",
app.$config,
app.$theme
);

Outline

<h1>Example heading <span class="badge">New</span></h1>
<h2>Example heading <span class="badge">New</span></h2>
<h3>Example heading <span class="badge">New</span></h3>
<h4>Example heading <span class="badge">New</span></h4>
<h5>Example heading <span class="badge">New</span></h5>
<h6>Example heading <span class="badge">New</span></h6>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$badge: functions.get-theme(app.$theme, 'components.badge');

@include mixins.generate-component(
$badge,
"badge",
app.$config,
app.$theme
);

Icons

<h1>Example heading <span class="badge"><svg width="10" height="10" aria-hidden="true"
                                             xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                             viewBox="0 0 20 20">
        <path
            d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"/></svg>New</span>
</h1>
<h2>Example heading <span class="badge">New</span></h2>
<h3>Example heading <span class="badge">New</span></h3>
<h4>Example heading <span class="badge">New</span></h4>
<h5>Example heading <span class="badge">New</span></h5>
<h6>Example heading <span class="badge">New</span></h6>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$badge: functions.get-theme(app.$theme, 'components.badge');

@include mixins.generate-component(
$badge,
"badge",
app.$config,
app.$theme
);

Outline

<span class="badge"
      style="--xii-badge-background: transparent; --xii-badge-color: red; --xii-badge-border: 1px solid red;">New</span>
<span class="badge"
      style="--xii-badge-background: transparent; --xii-badge-color: green; --xii-badge-border: 1px solid green;">New</span>
<span class="badge"
      style="--xii-badge-background: transparent; --xii-badge-color: yellow; --xii-badge-border: 1px solid yellow;">New</span>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;
@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$badge: functions.get-theme(app.$theme, 'components.badge');

@include mixins.generate-component(
$badge,
"badge",
app.$config,
app.$theme
);