Footer

The Footer component allows for customizable footers with optional social links, navigation links and logo.

Usage

Default Footer

<Footer
  copyright="© 2025 Your Company"
  links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
  logo={image}
  socialLinks={[{ icon: FaGithub, href: "https://github.com", title: "GitHub" }, { icon: FaTwitter, href: "https://twitter.com", title: "Twitter" }, { icon: FaLinkedin, href: "https://linkedin.com", title: "LinkedIn" }]}
/>

Props

Sortable data table
Prop	Type	Default	Description
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme color for the footer background and text.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius for the footer container.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Box shadow style for the footer.
className	string	-	Additional CSS class for the footer container.
data-testid	string	"footer"	Custom test ID for the root element.
copyright	string	-	Copyright notice displayed in the footer.
links	Array<{ label: string; href: string }>	-	Array of navigation links in the footer. Each item is `{ label: string; href: string }`.
logo	React.ReactNode	-	Logo for the footer. Can be an image URL, imported image, or JSX element.
socialLinks	Array<{ icon: React.ElementType, href: string, title: string }>	-	Array of social link objects. Each is `{ icon, href, title }`.
showThemeSelect	boolean	false	Show a theme select dropdown in the footer.
attachment	"static" \| "sticky" \| "fixed"	"static"	Attachment type of the footer: static (default), sticky (sticks to bottom), or fixed (fixed to viewport).