Form Footer

The section at the bottom of a form typically contains call-to-action buttons.

The form footer should always be the last part of a form. This is where the form's CTAs should reside.

Anatomy

The anatomy of the form footer.

Separator: A little border that helps differentiate the footer from the rest of the form.

Content: By default, the content of the footer contains a CTA Group with the main CTAs of a form. For more information on our CTA guidelines, check out our button guides.

Modals use the CTA group instead of the Form Footer component

Styling

This documentation references form tokens. Look at this table To learn more about all related tokens.

Spacing

Horizontal

The separator should span the whole parent container, but the padding of the content should align with the fields above.

The horizontal padding of the form footer content.

Top Margin

The gap between the form footer and the rest of the form should have a minimum of 32px (forms-formBody-paddingBottom).

The minimum recommended spacing between the form footer and the rest of the form.

Footer Content Vertical Padding

The content should have a vertical padding of 16px (forms-formFooter-verticalPadding.)

The vertical padding of the form footer content.

Color

Form Footer Separator

The separator uses the token forms-formFooter-separator for its styling, meaning it has a 1px stroke and uses cornflower-300 as its color.

The form footer separator.

Behavior

Scrolling

The form footer can remain fixed to the bottom of its parent container if the form is larger than the height of the screen. But the majority of fields below the first fold of the screen should be optional, otherwise, we strongly recommend not making the footer fixed.

A form footer fixed to the bottom of the screen.

CTA Group

As the name suggests CTA Groups are used for adding up to 3 CTAs to forms or dialog-type components.

Something looks broken on this site?

Report it to the Design System team here!

Form Footer

Anatomy