Component Blueprints

Docked Form Footer

Docked form footer is used to dock form actions to the bottom of the viewport

The popover should be positioned with JavaScript.

When errors are found within a form, the user will be notified with a popover with the page-level errors listed out.

Accessibility#

Please provide a contextually specific title for the dialog with the aria-label attribute. e.g. "Acme Global edit form errors".

Base#

<div class="slds-docked-form-footer">
  <button type="button" class="slds-button slds-button_neutral">Cancel</button>
  <button type="button" class="slds-button slds-button_brand">Save</button>
</div>

With Error(s)#

<div class="slds-docked-form-footer">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-error" title="Resolve error">
    <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>

With Error Popover#

<div class="slds-docked-form-footer">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-error" title="Resolve error">
    <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#error"></use>

Overview of CSS Classes#

Selector.slds-docked-form-footer
Summary

Creates a docked form footer

Supportdev-ready
Restrictdiv
VariantTrue

Docked Form Footer Release Notes