Feedback

Toast JS

Built entirely by window.JoyToast.show(message, type) — no markup needed beforehand. See JavaScript API.

<button class="joy-btn joy-btn-solid" onclick="JoyToast.show('Done!', 'success')">Show a toast</button>

Confirmation modal JS

Built by window.JoyModal.confirm(options), which returns a Promise. See JavaScript API.

<button class="joy-btn joy-btn-ghost" onclick="JoyModal.confirm({title:'Are you sure?', message:'This action can\'t be undone.', danger:true})">Open a modal</button>

Icon circle

A large marker for intro or success screens:

<div class="joy-icon-circle"><i class="ph ph-sparkle"></i></div>
<div class="joy-icon-circle is-success"><i class="ph ph-check"></i></div>

Badges

Verified

<span class="joy-badge-success"><i class="ph ph-check-circle"></i> Verified</span>

Loading spinner

The .joy-spin utility spins any icon — it's what JoyButton.loading() uses underneath:

<i class="ph ph-spinner joy-spin" style="font-size:1.5rem;"></i>