---
title: Form Footer Pattern
description: Consistent action placement for CRUD form operations.
icon: panel-bottom
author:
  name: eblairmckee
  url: https://github.com/eblairmckee
mode: wide
---

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.

<ComponentPreview name="pattern-form-footer-page-demo" />

**Button order (left to right):**

1. **Primary (filled)**: Create / Save / Submit / Finish
2. **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.

<ComponentPreview name="pattern-form-footer-modal-demo" />

**Button order (left to right):**

1. **Ghost**: Cancel
2. **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

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

### Modal Form Footer

```
┌─────────────────────────────────────┐
│ DialogFooter                        │
│ ├── Button (ghost) "Cancel"         │
│ └── Button (primary) "Create"       │
└─────────────────────────────────────┘
                   Right-aligned ↑
```

## Best Practices

1. **Consistent alignment** - Full-page forms left-align, modals right-align
2. **Button order matters** - Primary action should be easily reachable
3. **Clear labels** - Use action-oriented verbs: "Create", "Save", "Submit"
4. **Cancel is always ghost** - De-emphasize the escape route