Button Group - JS + CSS

Button Group

Struktur HTML


<div class="ina-button-group" role="group" aria-label="Button group">
  <button
    type="button"
    class="ina-button-group__button"
    aria-pressed="false"
  >
    <span class="ina-button-group__button-content">1 Minggu</span>
  </button>
  <button
    type="button"
    class="ina-button-group__button ina-button-group__button--selected"
    aria-pressed="true"
  >
    <span class="ina-button-group__button-content">1 Bulan</span>
  </button>
  <button
    type="button"
    class="ina-button-group__button"
    aria-pressed="false"
  >
    <span class="ina-button-group__button-content">1 Tahun</span>
  </button>
</div>

Contoh Penggunaan

Contoh 1 - Basic ButtonGroup

Pilih Tema

Selected: month

Selected: grid

Selected: all

<div class="p-5 flex flex-col gap-6">
  <BrandSelector class="mb-4" />
  <!-- Period Options -->
  <div>
    <p id="periodSelected" class="mb-2 text-sm text-[#666]">Selected: month</p>
    <div id="buttonGroupPeriod" class="ina-button-group" role="group" aria-label="Button group">
      <button type="button" class="ina-button-group__button" data-value="year" aria-pressed="false">
        <span class="ina-button-group__button-content">1 Tahun</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button ina-button-group__button--selected"
        data-value="month"
        aria-pressed="true"
      >
        <span class="ina-button-group__button-content">1 Bulan</span>
      </button>
      <button type="button" class="ina-button-group__button" data-value="week" aria-pressed="false">
        <span class="ina-button-group__button-content">7 Hari</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button"
        data-value="custom"
        aria-pressed="false"
      >
        <span class="ina-button-group__button-content">Pilih Tanggal</span>
      </button>
    </div>
  </div>

  <!-- View Options -->
  <div>
    <p id="viewSelected" class="mb-2 text-sm text-[#666]">Selected: grid</p>
    <div id="buttonGroupView" class="ina-button-group" role="group" aria-label="Button group">
      <button
        type="button"
        class="ina-button-group__button ina-button-group__button--selected"
        data-value="grid"
        aria-pressed="true"
      >
        <span class="ina-button-group__button-content">Grid</span>
      </button>
      <button type="button" class="ina-button-group__button" data-value="list" aria-pressed="false">
        <span class="ina-button-group__button-content">List</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button"
        data-value="table"
        aria-pressed="false"
      >
        <span class="ina-button-group__button-content">Table</span>
      </button>
    </div>
  </div>

  <!-- Filter Options -->
  <div>
    <p id="filterSelected" class="mb-2 text-sm text-[#666]">Selected: all</p>
    <div id="buttonGroupFilter" class="ina-button-group" role="group" aria-label="Button group">
      <button
        type="button"
        class="ina-button-group__button ina-button-group__button--selected"
        data-value="all"
        aria-pressed="true"
      >
        <span class="ina-button-group__button-content">Semua</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button"
        data-value="active"
        aria-pressed="false"
      >
        <span class="ina-button-group__button-content">Aktif</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button"
        data-value="inactive"
        aria-pressed="false"
      >
        <span class="ina-button-group__button-content">Tidak Aktif</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button"
        data-value="archive"
        aria-pressed="false"
      >
        <span class="ina-button-group__button-content">Arsip</span>
      </button>
    </div>
  </div>
</div>

<script>
  const buttonGroupPeriod = document.getElementById('buttonGroupPeriod');
  buttonGroupPeriod?.addEventListener('button-group:change', (event: any) => {
    const periodSelected = document.getElementById('periodSelected');
    if (periodSelected && event?.detail?.value) {
      periodSelected.textContent = `Selected: ${event.detail.value}`;
    }
  });

  const buttonGroupView = document.getElementById('buttonGroupView');
  buttonGroupView?.addEventListener('button-group:change', (event: any) => {
    const viewSelected = document.getElementById('viewSelected');
    if (viewSelected && event?.detail?.value) {
      viewSelected.textContent = `Selected: ${event.detail.value}`;
    }
  });

  const buttonGroupFilter = document.getElementById('buttonGroupFilter');
  buttonGroupFilter?.addEventListener('button-group:change', (event: any) => {
    const filterSelected = document.getElementById('filterSelected');
    if (filterSelected && event?.detail?.value) {
      filterSelected.textContent = `Selected: ${event.detail.value}`;
    }
  });
</script>

Contoh 2 - ButtonGroup with Features

Icon Options (Selected: center)

Custom Labels (Selected: option1)

Entire Group Disabled

Individual Option Disabled (Selected: option1)

<div class="flex flex-col gap-6">
  <!-- Icon Options -->
  <div>
    <p id="iconSelected" class="mb-2 text-sm text-[#666]">Icon Options (Selected: center)</p>
    <div id="buttonGroupIcon" class="ina-button-group" role="group" aria-label="Button group">
      <button type="button" class="ina-button-group__button" data-value="left" aria-pressed="false">
        <span class="ina-button-group__button-content">◀</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button ina-button-group__button--selected"
        data-value="center"
        aria-pressed="true"
      >
        <span class="ina-button-group__button-content">◄►</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button"
        data-value="right"
        aria-pressed="false"
      >
        <span class="ina-button-group__button-content">▶</span>
      </button>
    </div>
  </div>

  <!-- Custom Labels -->
  <div>
    <p id="customLabelSelected" class="mb-2 text-sm text-[#666]">
      Custom Labels (Selected: option1)
    </p>
    <div
      id="buttonGroupCustomLabel"
      class="ina-button-group"
      role="group"
      aria-label="Button group"
    >
      <button
        type="button"
        class="ina-button-group__button ina-button-group__button--selected"
        data-value="option1"
        aria-pressed="true"
      >
        <span class="ina-button-group__button-content">
          <strong>Option 1</strong> - Custom Label
        </span>
      </button>
      <button
        type="button"
        class="ina-button-group__button"
        data-value="option2"
        aria-pressed="false"
      >
        <span class="ina-button-group__button-content">
          <em>Option 2</em> - Italic Label
        </span>
      </button>
      <button
        type="button"
        class="ina-button-group__button"
        data-value="option3"
        aria-pressed="false"
      >
        <span class="ina-button-group__button-content">
          Option 3 <span style="color: #2871ff">●</span>
        </span>
      </button>
    </div>
  </div>

  <!-- Entire Group Disabled -->
  <div>
    <p id="entireGroupDisabledSelected" class="mb-2 text-sm text-[#666]">Entire Group Disabled</p>
    <div
      id="buttonGroupEntireGroupDisabled"
      class="ina-button-group ina-button-group--disabled"
      role="group"
      aria-label="Button group"
    >
      <button
        type="button"
        class="ina-button-group__button ina-button-group__button--disabled"
        disabled
        data-value="left"
        aria-pressed="false"
        aria-disabled="true"
      >
        <span class="ina-button-group__button-content">◀</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button ina-button-group__button--selected ina-button-group__button--disabled"
        disabled
        data-value="center"
        aria-pressed="true"
        aria-disabled="true"
      >
        <span class="ina-button-group__button-content">◄►</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button ina-button-group__button--disabled"
        disabled
        data-value="right"
        aria-pressed="false"
        aria-disabled="true"
      >
        <span class="ina-button-group__button-content">▶</span>
      </button>
    </div>
  </div>

  <!-- Individual Option Disabled -->
  <div>
    <p id="individualOptionDisabledSelected" class="mb-2 text-sm text-[#666]">
      Individual Option Disabled (Selected: option1)
    </p>
    <div
      id="buttonGroupIndividualOptionDisabled"
      class="ina-button-group"
      role="group"
      aria-label="Button group"
    >
      <button
        type="button"
        class="ina-button-group__button ina-button-group__button--selected"
        data-value="option1"
        aria-pressed="true"
      >
        <span class="ina-button-group__button-content">Option 1</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button ina-button-group__button--disabled"
        disabled
        data-value="option2"
        aria-pressed="false"
        aria-disabled="true"
      >
        <span class="ina-button-group__button-content">Option 2</span>
      </button>
      <button
        type="button"
        class="ina-button-group__button"
        data-value="option3"
        aria-pressed="false"
      >
        <span class="ina-button-group__button-content">Option 3</span>
      </button>
    </div>
  </div>
</div>

<script>
  const iconSelected = document.getElementById('iconSelected');
  const customLabelSelected = document.getElementById('customLabelSelected');
  const entireGroupDisabledSelected = document.getElementById('entireGroupDisabledSelected');
  const individualOptionDisabledSelected = document.getElementById(
    'individualOptionDisabledSelected'
  );

  const buttonGroupIcon = document.getElementById('buttonGroupIcon');
  buttonGroupIcon?.addEventListener('button-group:change', (event) => {
    if (iconSelected && event?.detail?.value) {
      iconSelected.textContent = `Icon Options (Selected: ${event.detail.value})`;
    }
  });

  const buttonGroupCustomLabel = document.getElementById('buttonGroupCustomLabel');
  buttonGroupCustomLabel?.addEventListener('button-group:change', (event) => {
    if (customLabelSelected && event?.detail?.value) {
      customLabelSelected.textContent = `Custom Label Options (Selected: ${event.detail.value})`;
    }
  });

  const buttonGroupEntireGroupDisabled = document.getElementById('buttonGroupEntireGroupDisabled');
  buttonGroupEntireGroupDisabled?.addEventListener('button-group:change', (event) => {
    if (entireGroupDisabledSelected && event?.detail?.value) {
      entireGroupDisabledSelected.textContent = `Entire Group Disabled (Selected: ${event.detail.value})`;
    }
  });

  const buttonGroupIndividualOptionDisabled = document.getElementById(
    'buttonGroupIndividualOptionDisabled'
  );
  buttonGroupIndividualOptionDisabled?.addEventListener('button-group:change', (event) => {
    if (individualOptionDisabledSelected && event?.detail?.value) {
      individualOptionDisabledSelected.textContent = `Individual Option Disabled (Selected: ${event.detail.value})`;
    }
  });
</script>