Form actions

The row

Actions go in a .cluster after the last field, with the primary button at the inline end. Use .cluster.is-end to align the row to the trailing edge. DOM order matches visual order, so the primary action comes last in the reading order too.

<form class="stack" style="max-inline-size: 24rem">
            <div class="stack is-tight">
                <label for="act-name">Workspace name</label>
                <input id="act-name" type="text" class="input" required />
            </div>
            <div class="cluster is-end">
                <button class="button" type="submit">Create workspace</button>
            </div>
        </form>

With a secondary action

A cancel control goes at the inline start, opposite the primary button. It is usually a plain link or .button.is-ghost so it reads as secondary. A secondary action that goes back sits before the primary one in source order.

<form class="stack" style="max-inline-size: 24rem">
            <div class="stack is-tight">
                <label for="act-name2">Workspace name</label>
                <input id="act-name2" type="text" class="input" required />
            </div>
            <div class="cluster is-between" style="max-inline-size: 24rem">
                <a href="#" class="nav-link">Discard changes</a>
                <button class="button" type="submit">Save</button>
            </div>
        </form>

Destructive actions

A destructive action, like deleting the thing the form is about, gets .is-danger and sits at the inline start, away from the primary button. For anything that cannot be undone, use a dialog with the action spelled out; the form then only needs a link that opens it.

<form class="stack" style="max-inline-size: 24rem">
            <div class="stack is-tight">
                <label for="act-name3">Workspace name</label>
                <input id="act-name3" type="text" class="input" required />
            </div>
            <div class="cluster is-between" style="max-inline-size: 24rem">
                <button class="button is-danger is-outlined" type="button">Delete project</button>
                <button class="button" type="submit">Save changes</button>
            </div>
        </form>

In a dialog

In a .dialog, the footer slot already aligns its contents to the inline end, so the buttons go in a plain .cluster without is-end. Keep the order: quiet action first, primary action last.