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

<div class="content">
  <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>
</div>

@use '~/styles/app.scss' as app;

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

@include app.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 '~/styles/app.scss' as app;

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

@include app.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 '~/styles/app.scss' as app;

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

@include app.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 '~/styles/app.scss' as app;

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

@include app.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 '~/styles/app.scss' as app;
$badge: app.get-theme(app.$theme, 'components.badge');

@include app.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 '~/styles/app.scss' as app;

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

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