Button - JS + CSS

Button

Struktur HTML


<button class="ina-button ina-button--primary ina-button--md">Button</button>

Contoh Penggunaan

Contoh 1

<div class="p-5 flex flex-col gap-4">
  <div class="flex items-center gap-3 flex-wrap">
    <button class="ina-button ina-button--primary ina-button--md">Primary</button>
    <button class="ina-button ina-button--secondary ina-button--md">Secondary</button>
    <button class="ina-button ina-button--tertiary ina-button--md">Tertiary</button>
    <button class="ina-button ina-button--link ina-button--md">Link</button>
  </div>
  <div class="flex items-center gap-3 flex-wrap">
    <button class="ina-button ina-button--primary ina-button--sm">Small</button>
    <button class="ina-button ina-button--primary ina-button--md">Medium</button>
    <button class="ina-button ina-button--primary ina-button--lg">Large</button>
    <button class="ina-button ina-button--primary ina-button--xl">Extra Large</button>
    <button class="ina-button ina-button--primary ina-button--2xl">2X Large</button>
  </div>
</div>

Contoh 2

<div class="p-5 flex flex-col gap-4">
  <div class="flex items-center gap-3 flex-wrap">
    <button class="ina-button ina-button--primary ina-button--md">
      <span class="ina-button__prefix-icon">
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></path>
          <polyline
            points="7 10 12 15 17 10"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></polyline>
          <line
            x1="12"
            y1="15"
            x2="12"
            y2="3"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></line>
        </svg>
      </span>
      Download
    </button>
    <button class="ina-button ina-button--secondary ina-button--md">
      Continue
      <span class="ina-button__suffix-icon">
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <line
            x1="5"
            y1="12"
            x2="19"
            y2="12"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></line>
          <polyline
            points="12 5 19 12 12 19"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></polyline>
        </svg>
      </span>
    </button>
    <button class="ina-button ina-button--primary ina-button--md">
      <span class="ina-button__prefix-icon">
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <polyline
            points="20 6 9 17 4 12"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></polyline>
        </svg>
      </span>
      Submit
      <span class="ina-button__suffix-icon">
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <line
            x1="5"
            y1="12"
            x2="19"
            y2="12"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></line>
          <polyline
            points="12 5 19 12 12 19"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"></polyline>
        </svg>
      </span>
    </button>
  </div>
  <div class="flex items-center gap-3 flex-wrap">
    <button class="ina-button ina-button--primary ina-button--md" disabled>Disabled</button>
    <button class="ina-button ina-button--secondary ina-button--md" disabled>Disabled</button>
  </div>
</div>