Source code

src/showcase/pages/components/badges.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the badges component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentBadges"}'
  ></include>
  <div class="catalog-grid">
    <article class="card full">
      <header class="card-header"><h2 x-text="$t('galleryBadgeVariants')"></h2></header>
      <div class="card-body">
        <div class="demo-stack">
          <div class="demo-row">
            <template
              x-for="tone in ['success','warning','danger','accent','info','neutral']"
              :key="tone"
            >
              <span class="badge" :data-tone="tone" x-text="$t(tone)"></span>
            </template>
          </div>
          <div class="demo-row">
            <template
              x-for="status in ['active','pending','running','suspended','failed','completed']"
              :key="status"
            >
              <span class="badge" :data-status="status" x-text="$t(status)"></span>
            </template>
          </div>
          <div class="demo-row">
            <span class="badge" data-tone="success">
              <span x-icon="'check'"></span>
              <span x-text="$t('active')"></span>
            </span>
            <span class="badge badge-outline" data-tone="accent">v0.1</span>
            <button class="btn btn-secondary" @click="$store.toasts.push($t('toastExample'))">
              <span x-text="$t('notifications')"></span>
              <span class="badge" data-tone="accent">8</span>
            </button>
            <span class="ui-chip" x-show="!dismissed">
              Production
              <button
                class="btn btn-ghost icon-button"
                :aria-label="$t('galleryRemoveChip')"
                @click="dismissed = true"
              >
                <span x-icon="'close'"></span>
              </button>
            </span>
            <button
              class="btn btn-ghost btn-sm"
              x-show="dismissed"
              @click="dismissed = false"
              x-text="$t('galleryRestoreChip')"
            ></button>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>