The Wheels

Button

variant / slot / disable-on-click / reset()

Preview

variant

送信する 下書き保存 キャンセル

icon slot

保存する 次へ進む

disabled

送信する 下書き保存 キャンセル

disable-on-click

一度だけ押せる reset()

HTML

<div class="ks-row">
  <tw-button>送信する</tw-button>
  <tw-button variant="stroke">下書き保存</tw-button>
  <tw-button variant="ghost">キャンセル</tw-button>
</div>

<div class="ks-row">
  <tw-button>
    <tw-svg-loader
      id="…"
      slot="icon-left"
      width="16"
      height="16"
      stroke-color="currentColor"
    ></tw-svg-loader>
    保存する
  </tw-button>
</div>

<div class="ks-row">
  <tw-button id="…" disable-on-click>一度だけ押せる</tw-button>
  <tw-button type="button" id="…" variant="stroke">reset()</tw-button>
</div>
import "@b4moss/the-wheels";
import checkUrl from "@b4moss/the-wheels-components/assets/check.svg?url";

const icon = document.getElementById("btn-icon");
if (icon) icon.setAttribute("src", checkUrl);

document.getElementById("reset-btn")?.addEventListener("click", () => {
  document.getElementById("click-once")?.reset();
});
import "@b4moss/the-wheels";
import checkUrl from "@b4moss/the-wheels-components/assets/check.svg?url";
import type { TwButton } from "@b4moss/the-wheels";

const icon = document.getElementById("btn-icon");
if (icon) icon.setAttribute("src", checkUrl);

document.getElementById("reset-btn")?.addEventListener("click", () => {
  const once = document.getElementById("click-once") as TwButton | null;
  once?.reset();
});