Form Footer Pattern
Consistent action placement for CRUD form operations.
Form footers provide consistent action placement for CRUD operations. The pattern differs based on whether the form is full-page or modal.
Full-Page Form Footer
For full-page forms, place buttons at the bottom, left-aligned with the form fields.
Button order (left to right):
- Primary (filled): Create / Save / Submit / Finish
- Ghost/Link: Cancel
Code Example
tsx
import { Button } from '@/components/redpanda-ui/button';
export function FullPageFormFooter() { return ( <footer className="flex items-center gap-2"> <Button type="submit">Create</Button> <Button type="button" variant="ghost"> Cancel </Button> </footer> );}Modal Form Footer
For modal forms, place buttons in the footer, right-aligned using DialogFooter.
Button order (left to right):
- Ghost: Cancel
- Primary (filled): Create / Save / Submit / Finish
Code Example
tsx
import { Button } from '@/components/redpanda-ui/button';import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/redpanda-ui/dialog';
export function ModalFormFooter() { return ( <Dialog> <DialogContent> <DialogHeader> <DialogTitle>Create Item</DialogTitle> </DialogHeader> {/* Form fields */} <DialogFooter> <Button type="button" variant="ghost"> Cancel </Button> <Button type="submit">Create</Button> </DialogFooter> </DialogContent> </Dialog> );}The One Primary Rule
One filled primary button per form region/layout. This represents the main action you want users to take. Multiple filled buttons create visual competition and dilute focus.
Button Variant Guidelines
| Action Type | Full-Page Form | Modal Form |
|---|---|---|
| Submit/Create/Save | Primary (filled) | Primary (filled) |
| Validate (if separate) | Secondary (outline) | Secondary (outline) |
| Cancel | Ghost | Ghost |
Anatomy
Full-Page Form Footer
plaintext
┌─────────────────────────────────────┐│ footer (flex items-center gap-2) ││ ├── Button (primary) "Create" ││ └── Button (ghost) "Cancel" │└─────────────────────────────────────┘ ↑ Left-alignedModal Form Footer
plaintext
┌─────────────────────────────────────┐│ DialogFooter ││ ├── Button (ghost) "Cancel" ││ └── Button (primary) "Create" │└─────────────────────────────────────┘ Right-aligned ↑Best Practices
- Consistent alignment - Full-page forms left-align, modals right-align
- Button order matters - Primary action should be easily reachable
- Clear labels - Use action-oriented verbs: “Create”, “Save”, “Submit”
- Cancel is always ghost - De-emphasize the escape route