AppFormActions
Action button footer — sticky or inline.
<app-form-actions><app-form-actions> is a footer container for form action buttons (submit, cancel, save, etc.). It can sit inline at the end of a form or stick to the viewport bottom on long forms, keeping actions visible and within reach. It supports three alignment modes: trailing (right), leading (left), or space-between for a cancel/submit pair.
Pair it with <app-form-section> and <app-form-row> to build consistent form layouts.
Playground
Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the footer above it.
Basic usage — inline footer
By default, AppFormActions right-aligns its children (align="end").
<app-form-actions>
<app-button variant="primary">Save</app-button>
</app-form-actions>Alignment — end, start, between
The align attribute controls how children are positioned within the footer.
align="start" — buttons on the left
align="between" — split layout for cancel/submit
<!-- align="start" -->
<app-form-actions align="start">
<app-button variant="outline-danger">Delete</app-button>
</app-form-actions>
<!-- align="between" -->
<app-form-actions align="between">
<app-button variant="outline">Cancel</app-button>
<app-button variant="primary">Submit</app-button>
</app-form-actions>Sticky footer — pinned to viewport bottom
On long forms, set sticky="true" to pin actions to the bottom of the screen.
<app-form-actions sticky="true" align="between">
<app-button variant="outline">Cancel</app-button>
<app-button variant="primary">Save Changes</app-button>
</app-form-actions>Note: On a real form page, the sticky footer stays visible as you scroll.
Styling
<app-form-actions> receives its appearance — border, background colour, padding — from the shared design system tokens in @webority/theme, published to this surface via Webority.Ui.Razor. The sticky class adds the positioning and layering; the surface background ensures buttons don't float over form content.
Common patterns
A single primary action
Cancel and confirm pair
Dangerous action on the left
Every option
The whole surface of the component, one cell per value.
align — all three
align="end"
align="start"
align="between"
sticky
(default) — inline, no sticky class
sticky="true" — top border + surface background, sticks to viewport bottom
single action vs cancel/submit pair
one action — align="end" (default)
destructive action alone — align="start"
cancel/submit pair — align="between"
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| (content) * | — | — | Action buttons (app-button, action-icon, etc.). |
| align | end | start | between | end | Horizontal placement of the buttons. end (default) = right, start = left, between = space-between. |
| sticky | boolean | false | Pin the bar to the viewport bottom with a top border and surface background. Use on forms taller than one screen. |
When to use
Use it when
- A form has action buttons at the end (submit, save, cancel, etc.).
- A form is longer than one viewport and needs actions to stay visible (use sticky).
- You need consistent button alignment across all forms (trailing, leading, or space-between).
Reach for something else when
- Buttons are inside a modal or dialog. → AppModal or AppConfirmDialog own the footer logic
- You need custom spacing or layout around buttons. → Use a raw flex/grid container for full control
- Buttons are scattered throughout the form, not grouped at the end. → Use AppButton directly where needed