# Sticky footer

A persistent container at the bottom of the viewport used for high-priority global actions (e.g., Save, Cancel, Next) that must remain visible while scrolling.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.sticky-footer.content"
  source="components/dist/registries/dskit.json#sticky-footer"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"sticky-footer"} activeTab={"content"} />

## Content guidelines

The sticky footer is a persistent action bar that remains visible at the bottom of a page or drawer as the user scrolls. It ensures that primary actions are always accessible without requiring the user to scroll to the bottom.

### When to use

- When a page or drawer contains primary actions that must remain available during scrolling.
- When users complete steppers or multi-field forms that extend beyond the current view.
- When the action affects the entire page, drawer, or form state.

### Button hierarchy

- The sticky footer must contain exactly one primary action. The only exception is an additional destructive button such as Delete.
- An optional secondary action can be included.
- Limit to a maximum of three buttons. More actions increase cognitive load.

### Button labels

Use clear verbs that describe the outcome. Labels should describe what will happen, not what the button is.

<DoDont pairs={[{ do: "Save", dont: "Done" }, { do: "Update", dont: "OK" }, { do: "Create", dont: "Submit (except on forms)" }, { do: "Confirm", dont: "Yes" }, { do: "Delete", dont: "Remove (for destructive permanent actions)" }, { do: "Continue (as part of a defined stepper)", dont: "Next (in sticky footers outside steppers)" }]} />

### Steppers

When used as part of a stepper, use the following label terminology consistently:

- **Back** for the previous step.
- **Next** for intermediate steps.
- **Submit** for the final step.

Do not mix **Continue** and **Next**, or **Finish** and **Submit** within the same flow.