# Save Button

The SaveButton component is a specialized button designed to handle the various states of a saving operation. It automatically manages the visual representation of states such as "Save Pending", "Verifying", "Saving", "Saved", and "Error". This component simplifies the UI logic for save actions by encapsulating the state transitions and appropriate icon/text feedback.

Instantiate the SaveButton using the constructor. You can customize the text displayed for each state and handle click events. The button's state is controlled programmatically via the SetState method.

using System;
using System.Threading.Tasks;
using H5;
using static H5.Core.dom;
using Tesserae;
using static Tesserae.UI;

public class SaveButtonExample
{
    public HTMLElement Render()
    {
        var saveButton = new SaveButton()
            .WithStateTexts(saved: "All changes saved!")
            .OnClick(async () =>
            {
                // Simulate a save operation
                saveButton.SetState(SaveButton.SaveState.Verifying);
                await Task.Delay(500);

                saveButton.SetState(SaveButton.SaveState.Saving);
                await Task.Delay(1000);

                saveButton.SetState(SaveButton.SaveState.Saved);

                // Reset after a delay
                await Task.Delay(2000);
                saveButton.SetState(SaveButton.SaveState.SavePending);
            });

        return Stack().Children(
            TextBlock("Click to save:"),
            saveButton.Render()
        ).Render();
    }
}

• WithStateTexts(string savePending = null, string verifying = null, string saving = null, string saved = null, string error = null) Customizes the text displayed for each state. • savePending: Text for the pending state (default: "Save"). • verifying: Text for the verifying state (default: "Verifying..."). • saving: Text for the saving state (default: "Saving..."). • saved: Text for the saved state (default: "Saved"). • error: Text for the error state (default: "Error"). Returns the SaveButton instance.

• SetState(SaveState state, string message = null) Updates the button to the specified state. • state: The new state (SavePending, Verifying, Saving, Saved, Error). • message: Optional message to override the default text for the state.

• OnClick(Action action) Sets the action to be executed when the button is clicked. • action: The callback to execute. Returns the SaveButton instance.

• Render() Renders the component to an HTMLElement.

• SavePending: The initial state, button is ready to be clicked (Primary style).
• Verifying: Indicates verification is in progress (Spinner, Disabled).
• Saving: Indicates saving is in progress (Spinner, Disabled).
• Saved: Indicates the save was successful (Success style).
• Error: Indicates an error occurred (Danger style).

var btn = new SaveButton()
    .OnClick(() => console.log("Save clicked"));

var btn = new SaveButton()
    .WithStateTexts(savePending: "Commit", saved: "Committed")
    .OnClick(() => StartCommitProcess(btn));

• Button
• SavingToast