Form Footer Pattern

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.

Open in

Loading component...

Button order (left to right):

Primary (filled): Create / Save / Submit / Finish
Ghost/Link: Cancel

Code Example

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>
  )
}

For modal forms, place buttons in the footer, right-aligned using DialogFooter.

Open in

Loading component...

Button order (left to right):

Ghost: Cancel
Primary (filled): Create / Save / Submit / Finish

Code Example

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

┌─────────────────────────────────────┐
│ footer (flex items-center gap-2)    │
│ ├── Button (primary) "Create"       │
│ └── Button (ghost) "Cancel"         │
└─────────────────────────────────────┘
         ↑ Left-aligned

┌─────────────────────────────────────┐
│ 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

Full-Page Form Footer

Code Example

Modal Form Footer

Code Example

The One Primary Rule

Button Variant Guidelines

Anatomy

Full-Page Form Footer

Modal Form Footer

Best Practices

On this page