Usage guidelines
Anatomy
Styling
Spacing
Horizontal padding
The separator should span the whole parent container, but the padding of the content should align to the fields above.
Top Margin
The gap between form footer and the rest of the form should have a minimum of 32 px(forms-formBody-marginBottom).
The minimum recommended spacing between the form footer and the rest of the form.
Content vertical padding
The content should have a vertical padding of 16px(forms-formFooter-verticalPadding).
The vertical padding of the form footer content.
Color
Separator
The separator uses the token forms-formFooter-separator for its styling meaning has a 1px width and uses cornflower 200 as its color.
Alignment
Left alignment
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.
Right alignment
When the parent form is a dialog-type component such as a modal, popover, or toast, align the buttons to the right to maintain consistent design and improve user interaction in these interface elements.
Behavior
Scrolling
Desktop
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.
Mobile
To ensure a clean mobile interface, stack buttons vertically on the navigation bar, and if the bar has more than two buttons, avoid fixing it in place to maintain usability and prevent overcrowding.
Related Components & Patterns