Button Handlers
JavaScript button interaction components with loading states, ripple effects, and toggles.
Button Handler
Manages button click events with loading states and ripple effects.
HTML
<!-- Button with loading state -->
<button
data-ss="button"
data-ss-button-loading="true"
style="
padding: 12px 24px;
background: var(--color_fill_primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
position: relative;
min-width: 140px;
"
>
<span class="ss-c-button__text">Submit</span>
<span
class="ss-c-button__loader"
style="
display: none;
position: absolute;
inset: 0;
background: inherit;
border-radius: inherit;
align-items: center;
justify-content: center;
"
>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
style="animation: spin 1s linear infinite"
>
<circle cx="12" cy="12" r="10" stroke-opacity="0.25" />
<path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round" />
</svg>
</span>
</button>
<!-- Button with ripple effect -->
<button
data-ss="button"
data-ss-button-ripple="true"
style="
padding: 12px 24px;
background: var(--color_fill_primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
overflow: hidden;
position: relative;
"
>
Click for Ripple
</button>
<!-- Combined loading and ripple -->
<button
data-ss="button"
data-ss-button-loading="true"
data-ss-button-ripple="true"
style="
padding: 14px 32px;
background: linear-gradient(
135deg,
var(--color_fill_primary),
#764ba2
);
color: white;
border: none;
border-radius: 24px;
cursor: pointer;
overflow: hidden;
position: relative;
font-weight: 600;
"
>
<span class="ss-c-button__text">Save Changes</span>
<span class="ss-c-button__loader" style="display: none">Saving...</span>
</button>Toggle Switch Manager
Manages toggle switches with optional state persistence via localStorage.
Auto-save
Automatically save your work
HTML
<!-- Basic toggle -->
<label
style="
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
"
>
<input
type="checkbox"
data-ss="toggle"
style="
width: 48px;
height: 24px;
appearance: none;
background: var(--color_fill_secondary);
border-radius: 12px;
position: relative;
cursor: pointer;
transition: background 0.2s;
"
/>
<span>Enable notifications</span>
</label>
<!-- Toggle with persistence -->
<label
style="
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
margin-top: 16px;
"
>
<input
type="checkbox"
data-ss="toggle"
data-ss-toggle-persist="true"
data-ss-toggle-storage-key="dark-mode"
id="darkModeToggle"
style="
width: 48px;
height: 24px;
appearance: none;
background: var(--color_fill_secondary);
border-radius: 12px;
position: relative;
cursor: pointer;
"
/>
<span>Dark Mode (persisted)</span>
</label>
<!-- Toggle with custom styling -->
<div
style="
margin-top: 24px;
padding: 20px;
background: var(--color_fill_secondary);
border-radius: 12px;
"
>
<div
style="
display: flex;
justify-content: space-between;
align-items: center;
"
>
<div>
<strong>Auto-save</strong>
<p style="margin: 4px 0 0; font-size: 14px; opacity: 0.7">
Automatically save your work
</p>
</div>
<input
type="checkbox"
data-ss="toggle"
data-ss-toggle-persist="true"
data-ss-toggle-storage-key="auto-save"
checked
style="
width: 52px;
height: 28px;
appearance: none;
background: var(--color_fill_primary);
border-radius: 14px;
position: relative;
cursor: pointer;
"
/>
</div>
</div>Button States
Different button states managed by the handler.
HTML
<div style="display: flex; flex-wrap: wrap; gap: 16px">
<!-- Default state -->
<button
data-ss="button"
style="
padding: 12px 24px;
background: var(--color_fill_primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
"
>
Default
</button>
<!-- Hover state (CSS) -->
<button
data-ss="button"
data-ss-button-ripple="true"
style="
padding: 12px 24px;
background: var(--color_fill_primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
"
>
Hover Me
</button>
<!-- Loading state -->
<button
data-ss="button"
data-ss-button-loading="true"
class="is-loading"
disabled
style="
padding: 12px 24px;
background: var(--color_fill_primary);
color: white;
border: none;
border-radius: 8px;
cursor: not-allowed;
opacity: 0.7;
"
>
<span class="ss-c-button__text" style="visibility: hidden">
Processing
</span>
<span
class="ss-c-button__loader"
style="
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
"
>
<span
style="
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
"
></span>
</span>
</button>
<!-- Disabled state -->
<button
data-ss="button"
disabled
style="
padding: 12px 24px;
background: var(--color_fill_secondary);
color: var(--color_text_secondary);
border: none;
border-radius: 8px;
cursor: not-allowed;
"
>
Disabled
</button>
<!-- Success state -->
<button
data-ss="button"
class="is-success"
style="
padding: 12px 24px;
background: var(--color_state_success);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
"
>
✓ Success
</button>
</div>JavaScript API
Programmatic control of button handlers.
JavaScript
<script>
// ButtonHandler - Loading states
import { ButtonHandler } from "stylescape";
const button = new ButtonHandler(element, {
loading: true,
ripple: true,
onClick: async () => {
// Async operation
await saveData();
},
});
button.setLoading(true); // Show loading
button.setLoading(false); // Hide loading
button.disable(); // Disable button
button.enable(); // Enable button
// ToggleSwitchManager - Persistence
import { ToggleSwitchManager } from "stylescape";
const toggle = new ToggleSwitchManager(checkbox, {
persist: true,
storageKey: "my-setting",
onChange: (checked) => {
console.log("Toggle state:", checked);
},
});
toggle.getState(); // Get current state
toggle.setState(true); // Set state programmatically
toggle.toggle(); // Toggle state
</script>