PageFooter

@coinbase/cds-web@8.34.1

PageFooter is a layout component that provides a consistent footer area for pages, with responsive padding and justification, typically used for action buttons or navigation elements.

Import

import { PageFooter } from '@coinbase/cds-web/page/PageFooter'

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Related components

• PageHeader,
• Button,
• ButtonGroup,
• Modal

---

󰏖

View as Markdown

Basic usage

Loading...

󰙡

Live Code

function BasicPageFooter() {
  return (
    <PageFooter
      action={
        <Button variant="primary" onClick={() => console.log('Clicked')}>
          Submit
        </Button>
      }
    />
  );
}

Responsive Layout

Loading...

󰙡

Live Code

function ResponsivePageFooter() {
  return (
    <Text color="foregroundMuted" font="caption">
      Resize window to see button alignment change: centered on mobile, right-aligned on
      tablet/desktop
      <PageFooter
        action={
          <HStack gap={2}>
            <Button variant="secondary" onClick={() => console.log('Cancel')}>
              Cancel
            </Button>
            <Button variant="primary" onClick={() => console.log('Submit')}>
              Submit
            </Button>
          </HStack>
        }
      />
    </Text>
  );
}

Custom Layout

Loading...

󰙡

Live Code

function CustomLayoutFooter() {
  return (
    <VStack gap={2}>
      {/* Override responsive defaults */}
      <PageFooter
        action={
          <Button variant="primary" onClick={() => console.log('Centered')}>
            Always Centered
          </Button>
        }
        justifyContent="center"
        paddingX={2}
      />

      {/* Custom styling */}
      <PageFooter
        action={
          <Button variant="primary" onClick={() => console.log('Custom')}>
            Custom Height
          </Button>
        }
        backgroundColor="bgSecondary"
        height={80}
        paddingY={3}
      />
    </VStack>
  );
}