Footer

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

Usage & Examples

Default Footer

default-footer.tsx
<Footer
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />

Visual variants

Themes

primary
secondary
tertiary
quaternary

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes
<Footer theme="primary"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />
<Footer theme="secondary"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />
<Footer theme="tertiary"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />
<Footer theme="quaternary"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />

// Variants
<Footer variant="solid"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />
<Footer variant="outline"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />
<Footer variant="glass"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />

// Rounding
<Footer rounding="none"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />
<Footer rounding="medium"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />
<Footer rounding="large"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />

// Shadows
<Footer shadow="none"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />
<Footer shadow="light"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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" }]}
  />
<Footer shadow="strong"
    copyright="© 2025 Your Company"
    links={[{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }]}
    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 API

51 props
Columns
Footer props API
Default
Description
actionGroupClassNamestringNoprops—Optional custom class name for action groups, such as the Connect group.
actionsClassNamestringNoprops—Optional custom class name for the actions column.
aria-describedbystringNoaria—Describes the footer landmark via external element IDs.
aria-labelstringNoaria—Accessible label for the overall footer landmark. Use when multiple contentinfo landmarks may appear on the page.
aria-labelledbystringNoaria—Accessible label reference for the overall footer landmark.
attachmentAttachmentTypeNoprops"static"Attachment type for how the footer is positioned. ('static' | 'fixed' | 'sticky')
bottomClassNamestringNoprops—Optional custom class name for the bottom bar.
bottomCopyrightClassNamestringNoprops—Optional custom class name for the bottom copyright text.
bottomEndReactNodeNoprops—Content shown on the right side of the bottom bar. Example: "Secure Environment"
bottomEndClassNamestringNoprops—Optional custom class name for the bottom-end content.
brandClassNamestringNoprops—Optional custom class name for the columns layout brand area.
brandDescriptionReactNodeNoprops—Optional brand description text displayed in the brand column.