Footer

Responsive footer components with multiple layout options for different use cases.

Minimal Footer

Snippet

import { Footer } from '@creo-team/buzz-ui/server'

<Footer 
	variant="minimal"
	logo="Buzz UI"
	copyright="© 2025 Buzz UI. All rights reserved."
/>

Simple Footer

Snippet

<Footer 
	variant="simple"
	links={[
		{ key: 'about', label: 'About', href: '#' },
		{ key: 'blog', label: 'Blog', href: '#' },
		{ key: 'team', label: 'Team', href: '#' }
	]}
	copyright="© 2025 Buzz UI. All rights reserved."
/>

Modern Footer with Newsletter

Snippet

<Footer 
	variant="modern"
	logo="Buzz UI"
	links={links}
	social={socialLinks}
	newsletter={{
		title: "Subscribe to our newsletter",
		description: "Get the latest updates delivered to your inbox.",
		onSubmit: (email) => console.log('Subscribed:', email)
	}}
	copyright="© 2025 Buzz UI. All rights reserved."
/>

Glass Footer

Snippet

<Footer 
	variant="glass"
	logo="Buzz UI"
	sections={footerSections}
	links={simpleLinks}
	social={socialLinks}
	copyright="© 2025 Buzz UI. All rights reserved."
/>

Epic Footer

Snippet

<Footer 
	variant="epic"
	logo="Buzz UI"
	sections={footerSections}
	links={simpleLinks}
	social={socialLinks}
	newsletter={{
		title: "Stay in the loop",
		description: "Join thousands of developers...",
		onSubmit: (email) => handleSubscribe(email)
	}}
	copyright="© 2025 Buzz UI. Crafted with ❤️"
/>

Footer with Sections

Snippet

<Footer 
	variant="sections"
	logo="Buzz UI"
	sections={[
		{
			key: 'product',
			title: 'Product',
			links: [
				{ key: 'features', label: 'Features', href: '#' },
				{ key: 'pricing', label: 'Pricing', href: '#' }
			]
		},
		{
			key: 'resources',
			title: 'Resources',
			links: [
				{ key: 'docs', label: 'Documentation', href: '/docs' },
				{ key: 'api', label: 'API Reference', href: '#' }
			]
		}
	]}
	social={socialLinks}
	copyright="© 2025 Buzz UI. All rights reserved."
/>

API Reference

Prop	Type	Default	Description
`variant`	`'simple' \| 'sections' \| 'modern' \| 'minimal' \| 'glass' \| 'epic'`	`'simple'`	Footer layout variant
`sections`	`FooterSection[]`	—	Section groups with title and links (for sections/glass/epic variants)
`links`	`FooterLink[]`	—	Simple link list for footer bottom
`copyright`	`React.ReactNode`	—	Copyright text or component
`logo`	`React.ReactNode`	—	Logo text or component
`social`	`FooterLink[]`	—	Social media links with icons
`newsletter`	`{ title: string, description: string, onSubmit: (email: string) => void }`	—	Newsletter subscription configuration
`className`	`string`	—	Additional CSS classes

Type Definitions

Snippet

interface FooterLink {
	key: string
	label: React.ReactNode
	href: string
	icon?: React.ReactNode
}

interface FooterSection {
	key: string
	title: string
	links: FooterLink[]
}

Accessibility Note: The footer component uses semantic HTML with proper ARIA labels. All interactive elements are keyboard accessible and social links include appropriate aria-label attributes.

Full API: /components/footer/api