Sleek Social Share · Six share platforms, one component
Set your URL and message once. Each button opens the correct share intent in a new tab. Copy Link writes to the clipboard and shows "Copied!" for two seconds, then resets.
Pick your icon style: brand gives each platform its own color, monochrome keeps everything uniform, outline goes transparent with a colored border. Control size, gap, borderRadius, alignment, and toggle showShadows and showTooltips on or off. Need to override a specific platform's color? Per-platform customColors controls show up only for the platforms you've enabled. Toggle between the Twitter bird and the X mark with twitterIcon.
Four hover effects via hoverEffect: scale (spring lift), glow (brightness + blurred radial halo), slide (larger upward lift), or none (subtle shadow only). Reduced motion users get a brightness-only hover automatically.
The buttons use flex-wrap so they reflow naturally on narrow widths. Every button has an aria-label, focus triggers the same hover state as mouse, and tooltips are properly wired for screen readers.
Controls: url, message · platforms (enable/disable per platform) · iconStyle, twitterIcon · size, gap, borderRadius, alignment · showShadows, showTooltips · customColors (per platform) · hoverEffect
Set your URL and message once. Each button opens the correct share intent in a new tab. Copy Link writes to the clipboard and shows "Copied!" for two seconds, then resets.
Pick your icon style: brand gives each platform its own color, monochrome keeps everything uniform, outline goes transparent with a colored border. Control size, gap, borderRadius, alignment, and toggle showShadows and showTooltips on or off. Need to override a specific platform's color? Per-platform customColors controls show up only for the platforms you've enabled. Toggle between the Twitter bird and the X mark with twitterIcon.
Four hover effects via hoverEffect: scale (spring lift), glow (brightness + blurred radial halo), slide (larger upward lift), or none (subtle shadow only). Reduced motion users get a brightness-only hover automatically.
The buttons use flex-wrap so they reflow naturally on narrow widths. Every button has an aria-label, focus triggers the same hover state as mouse, and tooltips are properly wired for screen readers.
Controls: url, message · platforms (enable/disable per platform) · iconStyle, twitterIcon · size, gap, borderRadius, alignment · showShadows, showTooltips · customColors (per platform) · hoverEffect
