Share Button

Buttons 69

About

Here is Share Button component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Share Button to your project and fits it to your theme.

Code

How Share Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import Image from "next/image"
import { Facebook, Link, Link2, Linkedin, Twitter } from "lucide-react"

import { Button } from "@/components/ui/button"

import ShareButton from "@/components/ui/share-button"

export default function ShareButtonDemo(): JSX.Element {
  const shareLinks = [
    {
      icon: Twitter,
      onClick: () => window.open("https://twitter.com/share"),
      label: "Share on Twitter",
    },
    {
      icon: Facebook,
      onClick: () => window.open("https://facebook.com/share"),
      label: "Share on Facebook",
    },
    {
      icon: Linkedin,
      onClick: () => window.open("https://linkedin.com/share"),
      label: "Share on LinkedIn",
    },
    {
      icon: Link,
      onClick: () => navigator.clipboard.writeText(window.location.href),
      label: "Copy link",
    },
  ]

  return (
    <div>
      <ShareButton links={shareLinks} className=" text-lg font-medium  ">
        <Link size={15} />
        Share
      </ShareButton>
    </div>
  )
}