Skip to content

Sleek Social Share

Six share platforms, one component

Sleek Social Share preview image 1

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

Rank history How rankings work →

11001200120098/149/49/2610/1811/9
  • All · #132

Details

More like this