Skip to content

component

Sleek Social Share

By Sanna Granqvist

Details

Summary

Six share platforms, one component

Description

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

Introduction

Six share platforms, one component

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200120098/148/228/309/79/15
  • All · #222