Components

Form buttons

A form's footer in one line, as Flux draws one: Delete at the start, then Cancel back to the list and Save. Not one of Flux UI's components: the kit's own, made of its button and spacer, worded from the RaskStrings catalog — a Hungarian reader reads Törlés, Mégse and Mentés.

A form's footer

Back(list) is where Cancel goes: a link, so a form's ConfirmLeave() asks first when something was typed. Remove(delete, heading, question) puts Delete at the start, which asks in the layout's Ui.Confirm and deletes only on yes. Save submits the form it stands in.

FormButtonsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

// Delete asks in the layout's Ui.Confirm, Cancel goes back to the list, Save submits the form.
public sealed partial class FormButtonsExample : Component
{
    private readonly Supplier _supplier = new();
    private string _said = "Nothing saved yet.";

    protected override Component? Render() =>
        Div.Class("space-y-3")[
            Form.Model(_supplier).OnSubmit(Save).Id("ufb-form").Class("max-w-md space-y-6")[
                Ui.Input.Bind(() => _supplier.Name).Label("Name"),
                Ui.Input.Bind(() => _supplier.City).Label("City"),
                Ui.FormButtons.Back(Routes.UiRowActionsPage()).Remove(Delete, "Delete supplier", $"Delete {_supplier.Name}? This cannot be undone.")
            ],
            Ui.Text.Id("ufb-said")[_said]
        ];

    private void Save(Supplier supplier) => _said = $"Saved {supplier.Name}, {supplier.City}.";

    private void Delete() => _said = $"Deleted {_supplier.Name}.";

    public sealed class Supplier
    {
        public string Name { get; set; } = "Aminoff Freight";

        public string City { get; set; } = "Oslo";
    }
}

Live result

Nothing saved yet.

Your own words

A new record is created, not saved: Save("Create") and Cancel("Back") name the two buttons. Unset, they are the catalog's Save and Cancel — Mentés and Mégse for a Hungarian reader.

FormButtonsWordsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

// A new record has nothing to delete, and its submit creates it.
public sealed partial class FormButtonsWordsExample : Component
{
    private readonly Supplier _supplier = new();
    private string _said = "Nothing created yet.";

    protected override Component? Render() =>
        Div.Class("space-y-3")[
            Form.Model(_supplier).OnSubmit(Create).Id("ufbw-form").Class("max-w-md space-y-6")[
                Ui.Input.Bind(() => _supplier.Name).Label("Name"),
                Ui.FormButtons.Back(Routes.UiRowActionsPage()).Save("Create").Cancel("Back")
            ],
            Ui.Text.Id("ufbw-said")[_said]
        ];

    private void Create(Supplier supplier) => _said = $"Created {supplier.Name}.";

    public sealed class Supplier
    {
        public string Name { get; set; } = "Quist Depot";
    }
}

Live result

Nothing created yet.

Reference

`Ui.FormButtons`

not in Flux UI

A form's footer as Flux draws one: Delete at the start, then Cancel back to the list and Save.

Step	Takes	What it does
`.Back(…)`	a route: Routes.SuppliersPage()	The list Cancel goes back to. Required, and taken first.
`.Remove(…)`	the delete, then the question's heading and the question (the catalog's when null)	A Delete button that asks first, in the layout's Ui.Confirm, and runs the delete on yes. Null draws none.
`.OnRemove(…)`	a handler, with no argument	The delete alone, asking the catalog's question: "Are you sure you want to delete it?"
`.RemoveHeading(…)`	`string`	The title over the delete's question. "Delete" when unset.
`.RemoveQuestion(…)`	`string`	The question the delete asks first.
`.Cancel(…)`	`string`	The label of the link back to the list. The catalog's "Cancel" when unset.
`.Save(…)`	`string`	The label of the submit: "Create" on a new record. The catalog's "Save" when unset.