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
| Type | Description | |
|---|---|---|
| aria-describedby | string | Describes the footer landmark via external element IDs. |
| aria-label | string | Accessible label for the overall footer landmark. Use when multiple contentinfo landmarks may appear on the page. |
| aria-labelledby | string | Accessible label reference for the overall footer landmark. |
| attachment | AttachmentType | Attachment type for how the footer is positioned. ('static' | 'fixed' | 'sticky') |
| className | string | Optional class name for custom styles. |
| copyright | string | Optional copyright text. |
| data-testid | string | Test ID for testing frameworks. |
| labelId | string | Optional heading/label ID for the footer content. Can be used with aria-labelledby. |
| links | FooterLink[] | Array of footer navigation links. |
| logo | LogoSource | Optional logo element (e.g., <img>, <Logo />). |
| logoAriaLabel | string | Accessible name for the logo when it is rendered as an image or custom node. |
| logoDecorative | boolean | If true, the logo is decorative and should be hidden from assistive tech. |
| navAriaLabel | string | Accessible label for the site links navigation region. Defaults can still be provided in the base component. |
| rounding | RoundingType | Rounding of the component. ('none' | 'small' | 'medium' | 'large' | 'full') |
| shadow | ShadowType | Shadow of the component. ('none' | 'light' | 'medium' | 'strong' | 'intense') |
| showThemeSelect | boolean | Whether to show the theme selector dropdown. |
| socialLinks | SocialLink[] | Array of social links with icons. |
| socialNavAriaLabel | string | Accessible label for the social links navigation region. Defaults can still be provided in the base component. |
| theme | ThemeType | Theme used for styling. ('primary' | 'secondary' | 'tertiary' | 'quaternary' | 'clear') |
| themeSelectAriaLabel | string | Accessible label for the theme selector region/container. |