Skip to content



A Footer is used to render a responsive page footer.


This example shows a complete footer:

This example shows a footer with logo only:

This example shows a footer with title only:

This example shows a footer with social icons only:

And this example shows a minimalistic footer:

System props

Footer does not support system props from Styled System.

Component props

logoNodeComponent that renders a logo (composition pattern).
socialIconsNodeSocial icons (composition pattern). You can use SocialIcons or build your own component.
linksArray of LinkFooter links (Link is defined below).
hrefStringWhen omitted link cannot be clicked.


You can customize Footer by defining the following variants in your theme:

footerSet color and bg.
footer.containerSet maxWidth and padding.
footer.logoSet mb for logo.
footer.titleSet mb for title.

In this example we customize Footer just like in @undataforum/preset. This needs to be done in your theme. In this example we do the customizations inside a ThemeProvider so they are visible in below source code.

Visual regression testing

The following URLs can be used for visual regression testing: