<section class="demo-section">
  <h2>Badges</h2>

  <h3>Variants</h3>
  <div class="demo-row">
    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-secondary">Secondary</span>
    <span class="badge badge-accent">Accent</span>
    <span class="badge badge-success">Success</span>
    <span class="badge badge-warning">Warning</span>
    <span class="badge badge-info">Info</span>
    <span class="badge badge-danger">Danger</span>
  </div>

  <h3>Outline</h3>
  <div class="demo-row">
    <span class="badge badge-primary badge-outline">Primary outline</span>
    <span class="badge badge-success badge-outline">Success outline</span>
    <span class="badge badge-danger badge-outline">Danger outline</span>
  </div>

  <h3>Sizes</h3>
  <div class="demo-row">
    <span class="badge badge-primary badge-sm">Small</span>
    <span class="badge badge-primary">Default</span>
    <span class="badge badge-primary badge-lg">Large</span>
  </div>

  <h3>With icon</h3>
  <div class="demo-row">
    <span class="badge badge-success with-icon">
      <i class="ph ph-check" aria-hidden="true"></i>
      Verified
    </span>
    <span class="badge badge-danger with-icon">
      <i class="ph ph-x" aria-hidden="true"></i>
      Failed
    </span>
  </div>

  <h3>Vue badges</h3>
  <div id="vue-badges-app" class="vue-mount"></div>
  <script type="module">
    import { createApp } from "vue";
    import { GnBadge } from "/vue/index.js";

    createApp({
      components: { GnBadge },
      template: `
        <div class="demo-row">
          <gn-badge variant="primary">Vue primary</gn-badge>
          <gn-badge variant="success">Vue success</gn-badge>
          <gn-badge variant="warning">Vue warning</gn-badge>
        </div>
      `
    }).mount("#vue-badges-app");
  </script>
</section>