<button class="bs-btn bs-btn-primary" type="button"
  data-bs-button data-bs-loading data-bs-loading-label="Saving changes">
  <span class="bs-btn-label">Save changes</span>
  <span class="bs-spinner bs-btn-spinner" aria-hidden="true"></span>
</button>

<script type="module">
  import { Button } from "@boobstrap/boobstrap/js/button";
  const element = document.querySelector("[data-bs-button]");
  const save = Button.getOrCreateInstance(element);
  element.addEventListener("click", async () => {
    await persistChanges();
    save.stop();
  });
</script>

<button class="bs-btn bs-btn-primary" type="button"
  x-data="bsButton" x-bind="root" data-bs-loading
  data-bs-loading-label="Saving changes"
  @click="persistChanges().finally(() => stop())">
  <span class="bs-btn-label">Save changes</span>
  <span class="bs-spinner bs-btn-spinner" aria-hidden="true"></span>
</button>

function SaveButton() {
  const save = useButton({ loadingLabel: "Saving changes" });
  const persist = () => persistChanges().finally(() => save.stop());

  return (
    <button className="bs-btn bs-btn-primary"
      {...save.getButtonProps({ onClick: persist })}>
      <span className="bs-btn-label">Save changes</span>
      <span className="bs-spinner bs-btn-spinner" aria-hidden="true" />
    </button>
  );
}

<button class="bs-btn bs-btn-secondary" type="button"
  data-bs-toggle="collapse" aria-controls="details">
  Toggle details
</button>

<div class="bs-collapse" id="details" hidden>
  Progressive by design.
</div>

<div x-data="bsCollapse">
  <button class="bs-btn bs-btn-secondary" type="button"
    x-bind="trigger" aria-controls="details">
    Toggle details
  </button>

  <div class="bs-collapse" id="details" x-bind="panel" hidden>
    Progressive by design.
  </div>
</div>

function Details() {
  const collapse = useCollapse({ id: "details" });

  return (
    <>
      <button className="bs-btn bs-btn-secondary"
        {...collapse.getTriggerProps()}>
        Toggle details
      </button>
      <div className="bs-collapse" {...collapse.getPanelProps()}>
        Progressive by design.
      </div>
    </>
  );
}

<div class="bs-dropdown bs-btn-group" data-bs-dropdown>
  <button class="bs-btn bs-btn-primary" type="button">Save changes</button>
  <button class="bs-btn bs-btn-primary bs-btn-split bs-btn-caret"
    id="save-toggle" type="button" data-bs-toggle="dropdown"
    aria-controls="save-menu" aria-label="More save options"></button>
  <div class="bs-dropdown-menu" id="save-menu" role="menu"
    aria-labelledby="save-toggle" data-bs-dropdown-menu hidden>
    <button class="bs-dropdown-item" type="button" role="menuitem">Save and publish</button>
  </div>
</div>

<div class="bs-dropdown bs-btn-group" x-data="bsDropdown" x-bind="root">
  <button class="bs-btn bs-btn-primary" type="button">Save changes</button>
  <button class="bs-btn bs-btn-primary bs-btn-split bs-btn-caret"
    id="save-toggle" type="button" data-bs-toggle="dropdown" x-bind="trigger"
    aria-controls="save-menu" aria-label="More save options"></button>
  <div class="bs-dropdown-menu" id="save-menu" role="menu"
    aria-labelledby="save-toggle" data-bs-dropdown-menu x-bind="menu" hidden>
    <button class="bs-dropdown-item" type="button" role="menuitem">Save and publish</button>
  </div>
</div>

function SaveActions() {
  const dropdown = useDropdown({ id: "save-menu" });

  return (
    <div className="bs-dropdown bs-btn-group" {...dropdown.getRootProps()}>
      <button className="bs-btn bs-btn-primary" type="button">Save changes</button>
      <button className="bs-btn bs-btn-primary bs-btn-split bs-btn-caret"
        aria-label="More save options" {...dropdown.getTriggerProps()} />
      <div className="bs-dropdown-menu" {...dropdown.getMenuProps()}>
        <button className="bs-dropdown-item" type="button" role="menuitem">
          Save and publish
        </button>
      </div>
    </div>
  );
}

<div class="bs-tabs" role="tablist" aria-label="Account" data-bs-tabs>
  <button class="bs-tab" id="profile-tab" type="button" role="tab"
    aria-controls="profile-panel" aria-selected="true">Profile</button>
  <button class="bs-tab" id="security-tab" type="button" role="tab"
    aria-controls="security-panel">Security</button>
</div>
<div class="bs-tab-panel" id="profile-panel" role="tabpanel"
  aria-labelledby="profile-tab">Profile settings</div>
<div class="bs-tab-panel" id="security-panel" role="tabpanel"
  aria-labelledby="security-tab" hidden>Security settings</div>

<section x-data="bsTabs">
  <div class="bs-tabs" role="tablist" aria-label="Account" x-bind="tablist">
    <button class="bs-tab" id="profile-tab" type="button" role="tab"
      x-bind="tab" aria-controls="profile-panel" aria-selected="true">Profile</button>
    <button class="bs-tab" id="security-tab" type="button" role="tab"
      x-bind="tab" aria-controls="security-panel">Security</button>
  </div>
  <div class="bs-tab-panel" id="profile-panel" role="tabpanel"
    aria-labelledby="profile-tab" x-bind="panel">Profile settings</div>
  <div class="bs-tab-panel" id="security-panel" role="tabpanel"
    aria-labelledby="security-tab" x-bind="panel" hidden>Security settings</div>
</section>

function Account() {
  const tabs = useTabs({ defaultSelectedId: "profile-tab" });

  return (
    <>
      <div className="bs-tabs" aria-label="Account" {...tabs.getTablistProps()}>
        <button className="bs-tab" {...tabs.getTabProps({
          id: "profile-tab", controls: "profile-panel"
        })}>Profile</button>
        <button className="bs-tab" {...tabs.getTabProps({
          id: "security-tab", controls: "security-panel"
        })}>Security</button>
      </div>
      <div className="bs-tab-panel" id="profile-panel"
        {...tabs.getPanelProps({ tabId: "profile-tab" })}>
        Profile settings
      </div>
      <div className="bs-tab-panel" id="security-panel"
        {...tabs.getPanelProps({ tabId: "security-tab" })}>
        Security settings
      </div>
    </>
  );
}