Social media share buttons for popular platforms.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

url

• Type: string - Default: current page URL
• URL to share

title

• Type: string - Default: document.title
• Share title

description

• Type: string
• Share description

platforms

• Type: string - Default: 'facebook,twitter,linkedin,email'
• Platforms to show (comma-separated)

style

• Type: 'icons' | 'buttons' | 'pills' - Default: 'icons'
• Button style

orientation

• Type: 'horizontal' | 'vertical' - Default: 'horizontal'
• Layout orientation

showLabels

• Type: boolean - Default: false
• Show labels

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 8
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

className

• Type: string
• Additional CSS class

onShare

• Type: (platform: SocialPlatform) => void
• Share click handler

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-radius: 8px; /* Border radius */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-social-share
• .cc-social-share__button
• .cc-social-share__icon