Buttons

A base .joy-btn plus two fill variants. Optional <i class="ph ph-*"> icon followed by a <span> for the label.

Variants

<button class="joy-btn joy-btn-solid"><i class="ph ph-check"></i><span>Solid</span></button>
<button class="joy-btn joy-btn-ghost"><i class="ph ph-arrow-right"></i><span>Ghost</span></button>

Icon-only

Add .joy-btn-icon for a compact circular button — used for the theme toggle and the user menu:

<button class="joy-btn joy-btn-ghost joy-btn-icon" aria-label="Toggle theme"><i class="ph ph-moon"></i></button>

Disabled

<button class="joy-btn joy-btn-solid" disabled><span>Unavailable</span></button>

Loading state

For buttons that trigger a network call (save, login, submit), use window.JoyButton instead of disabling the button by hand — it swaps the content for a spinner and restores it on its own:

<button class="joy-btn joy-btn-solid" id="jdocs-btn-demo"><span>Save changes</span></button>
<script>
document.getElementById("jdocs-btn-demo").addEventListener("click", function () {
    var btn = this;
    JoyButton.loading(btn);
    setTimeout(function () { JoyButton.reset(btn); }, 1800);
});
</script>

Full signature at JavaScript API → JoyButton.