usage
- Place after the form content it controls
- Use one clear primary action
- Keep destructive actions visually and semantically distinct
- Keep submission state and commands in the consuming application
Forms
Form actions
Group the commands that save, submit, cancel or otherwise advance a form.
Production component
Live preview
This example is rendered from the same package consumed by UJ applications.
Contract
Usage and quality requirements
The contract keeps purpose, states and ownership visible before a component is reused.
states
- primary and secondary actions
- disabled action
- pending action
- long labels
- narrow viewport
- dark theme
- forced colours
purpose
Keep a form's primary, secondary and destructive commands in one named, responsive action group.
responsive
- Actions wrap without overlap
- Full-width controls remain possible at narrow widths
- 320px
- 768px
- 1440px
- 200% text resize
accessibility
- Named group of native controls
- DOM order matches visual and keyboard order
- Disabled and pending states remain explicit
- Minimum target sizes come from governed buttons
- WCAG 2.2 AA
runtime Boundary
The component performs no submission, navigation, confirmation, authorization or state transition.
source Authority
Corporate Identity presentation contract and the consuming application's workflow