Source code

src/showcase/pages/components/buttons.html

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

Download source

<!--
Demonstrate the buttons 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":"componentButtons"}'
  ></include>
  <div class="catalog-grid">
    <article class="card">
      <header class="card-header"><h2 x-text="$t('galleryButtonVariants')"></h2></header>
      <div class="card-body">
        <div class="demo-stack">
          <div class="demo-row">
            <template x-for="tone in tones" :key="tone">
              <button
                class="btn"
                :class="'btn-' + tone"
                @click="$store.toasts.push($t('toastExample'))"
                x-text="$t(tone)"
              ></button>
            </template>
          </div>
          <div class="demo-row">
            <template x-for="tone in tones" :key="tone">
              <button
                class="btn"
                :class="'btn-outline-' + tone"
                @click="$store.toasts.push($t('toastExample'))"
                x-text="$t(tone)"
              ></button>
            </template>
          </div>
          <div class="demo-row">
            <button
              class="btn btn-ghost"
              @click="$store.toasts.push($t('toastExample'))"
              x-text="$t('showToast')"
            ></button>
            <button
              class="btn btn-secondary"
              @click="favorite = !favorite"
              :aria-pressed="favorite"
            >
              <span x-icon="'heart'"></span>
              <span x-text="$t('galleryFavorite')"></span>
            </button>
            <button
              class="btn btn-primary icon-button"
              :aria-label="$t('add')"
              @click="$store.toasts.push($t('toastExample'))"
            >
              <span x-icon="'plus'"></span>
            </button>
          </div>
        </div>
      </div>
    </article>
    <article class="card">
      <header class="card-header"><h2 x-text="$t('galleryButtonSizes')"></h2></header>
      <div class="card-body">
        <div class="demo-stack">
          <div class="demo-row">
            <button class="btn btn-primary btn-sm" x-text="$t('gallerySmall')"></button>
            <button class="btn btn-primary" x-text="$t('galleryRegular')"></button>
            <button class="btn btn-primary btn-lg" x-text="$t('galleryLarge')"></button>
          </div>
          <div class="demo-row">
            <button class="btn btn-secondary" disabled x-text="$t('disabled')"></button>
            <button class="btn btn-secondary" disabled aria-busy="true">
              <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
              <span x-text="$t('loading')"></span>
            </button>
          </div>
          <div class="btn-group" role="group" :aria-label="$t('view')">
            <button
              class="btn btn-secondary"
              @click="page = 1"
              :aria-pressed="page === 1"
              x-text="$t('overview')"
            ></button>
            <button
              class="btn btn-secondary"
              @click="page = 2"
              :aria-pressed="page === 2"
              x-text="$t('details')"
            ></button>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>