## 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="button__text">Submit</span>
                <span
                    class="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="button__text">Save Changes</span>
                <span class="button__loader" style="display: none">Saving...</span>
            </button>

### Toggle Switch Manager

Manages toggle switches with optional state persistence via localStorage.

Enable notifications Dark Mode (persisted)
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="button__text" style="visibility: hidden">
                        Processing
                    </span>
                    <span
                        class="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>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!