Form Patterns

FormActions

A horizontal action bar for form submit and cancel buttons, separated by a top border. Supports simple right-aligned buttons or split primary/secondary layout.

Sourcesrc/components/ui/form-actions.tsx

Import

import {
  FormActions,
  FormActionsPrimary,
  FormActionsSecondary,
} from "@mikenotthepope/substrateui"

Composition

FormActions
├── FormActionsSecondary
└── FormActionsPrimary

Split Layout

API Reference

FormActions

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply to the form actions container.
`children` required	`React.ReactNode`	—	Action buttons. When using sub-components (FormActionsPrimary / FormActionsSecondary), buttons are split left and right. Otherwise, buttons are right-aligned.

FormActionsPrimary

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the primary actions container.
`children` required	`React.ReactNode`	—	Primary action buttons (e.g., Save, Submit), aligned right.

FormActionsSecondary

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the secondary actions container.
`children` required	`React.ReactNode`	—	Secondary action buttons (e.g., Delete, Reset), aligned left.