Footer Section
Site footer with logo, tagline, link groups, social icons, copyright, and legal links.
Preview
Import
import { FooterSection } from "@sigil-ui/components";Usage
<FooterSection
logo={<SigilLogo />}
tagline="Token-driven design system for React."
groups={[
{ title: "Product", links: [{ label: "Docs", href: "/docs" }, { label: "Pricing", href: "/pricing" }] },
{ title: "Company", links: [{ label: "About", href: "/about" }, { label: "Blog", href: "/blog" }] },
]}
socials={[
{ label: "GitHub", href: "https://github.com", icon: <GitHubIcon /> },
{ label: "X", href: "https://x.com", icon: <XIcon /> },
]}
copyright="© 2026 Sigil UI"
legal={[
{ label: "Privacy", href: "/privacy" },
{ label: "Terms", href: "/terms" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo | ReactNode | — | Logo element (SVG or img) |
tagline | string | — | Short description below the logo |
groups | FooterLinkGroup[] | required | Array of { title, links: [{ label, href }] } |
socials | { label, href, icon }[] | — | Social media icon links |
copyright | string | — | Copyright text |
legal | { label, href }[] | — | Legal links (privacy, terms) |
className | string | — | Additional CSS classes |
Renders as a <footer> element. Plus all standard HTML attributes.