ShareModal

A ShareModal is build with a design system components and guidelines that enables users to share a link or content effortlessly. It provides options to share via social media, copy the link, or send via email, ensuring a seamless and accessible sharing experience.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/share-modal
Import
import { ShareModal } from '@adaptavant/share-modal';

Default​

The Share Modal takes a link, title, description (primary and secondary), and optionLabels for built‑in actions like Copy Link, Email, Facebook, Messenger, and WhatsApp. It also connects onClose and closeButtonProps with an explicit label to improve screen‑reader clarity.
The ShareModal is responsive: from tablet breakpoint it converts to a bottom sheet, displaying the link as a QR code with Copy and native Share button.

Note:
headingImageProps has been deprecate as of 1.1.0, please use avatarProps

const [openModal, setOpenModal] = React.useState(false);

const closeModal = () => {
  setOpenModal(false);
};

return (
  <React.Fragment>
    <Button
      iconStart={ShareIcon}
      label="Share"
      onClick={() => {
        setOpenModal(true);
      }}
      size="standard"
      variant="neutralSecondary"
    >
      Share
    </Button>
    <ShareModal
      className="share-modal"
      closeButtonProps={{
        label: "Close share modal",
        onClick: closeModal,
      }}
      link="https://earth.anywhere.co/widgets"
      onClose={closeModal}
      open={openModal}
      translations={{
        description: {
          primary: "Earth Design System",
          secondary:
            "That’s here. An evolving digital ecosystem that we strive to care.",
        },
        optionLabels: {
          copyLabel: "Copy Link",
          emailLabel: "Email",
          facebookLabel: "Facebook",
          messengerLabel: "Messenger",
          whatsappLabel: "Whatsapp",
        },
        title: "Share this page",
      }}
    />
  </React.Fragment>
);
View in Playroom

Translations​

Use the translations prop to localize the modal’s title and descriptions, and optionLabels to translate built‑in action buttons (Copy Link, Email, Facebook, Messenger, WhatsApp).

Note:
translations.content has been deprecate as of 1.1.0, please use translations.description.primary

const [openModal, setOpenModal] = React.useState(false);

const closeModal = () => {
  setOpenModal(false);
};

return (
  <React.Fragment>
    <Button
      iconStart={ShareIcon}
      label="Compartir"
      onClick={() => {
        setOpenModal(true);
      }}
      size="standard"
      variant="neutralSecondary"
    >
      Compartir
    </Button>
    <ShareModal
      className="share-modal"
      closeButtonProps={{
        label: "Cerrar modal de compartir",
        onClick: closeModal,
      }}
      link="https://earth.anywhere.co/widgets"
      onClose={closeModal}
      open={openModal}
      translations={{
        description: {
          primary: "Sistema de Diseño Earth",
          secondary:
            "Aquí está. Un ecosistema digital en evolución que nos esforzamos por cuidar.",
        },
        optionLabels: {
          copyLabel: "Copiar enlace",
          emailLabel: "Correo",
          facebookLabel: "Facebook",
          messengerLabel: "Messenger",
          whatsappLabel: "WhatsApp",
        },
        title: "Compartir esta página",
      }}
    />
  </React.Fragment>
);
View in Playroom

With Custom Options​

Use the shareOptions prop to include your own sharing buttons. Each option takes an icon, label, and onClick action—for example, opening a Twitter or LinkedIn share.

const [openModal, setOpenModal] = React.useState(false);

const closeModal = () => {
  setOpenModal(false);
};

return (
  <React.Fragment>
    <Button
      iconStart={ShareIcon}
      label="Share"
      onClick={() => {
        setOpenModal(true);
      }}
      size="standard"
      variant="neutralSecondary"
    >
      Share
    </Button>
    <ShareModal
      className="share-modal"
      closeButtonProps={{
        label: "Modal Close Button",
        onClick: closeModal,
      }}
      link="https://go.setmore.com"
      onClose={closeModal}
      open={openModal}
      shareOptions={[
        {
          icon: TwitterIcon,
          id: "share-via-twitter",
          label: "Twitter",
          onClick: () => {
            window.open(
              "https://twitter.com/intent/tweet?url=somelink",
              "_blank"
            );
          },
        },
        {
          icon: LinkedinIcon,
          id: "share-via-linkedin",
          label: "Linkedin",
          onClick: () => {
            window.open(
              "https://www.linkedin.com/sharing/share-offsite/?url=somelink",
              "_blank"
            );
          },
        },
      ]}
      translations={{
        description: { primary: "Share this page with" },
        optionLabels: {
          copyLabel: "Copy Link",
          emailLabel: "Email",
        },
        title: "Share this page",
      }}
    />
  </React.Fragment>
);
View in Playroom

API Reference​

Share Modal

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

ShareModal parts​

const [openModal, setOpenModal] = React.useState(false);

const closeModal = () => {
  setOpenModal(false);
};

return (
  <React.Fragment>
    <Button
      iconStart={ShareIcon}
      label="Share"
      onClick={() => {
        setOpenModal(true);
      }}
      size="standard"
      variant="neutralSecondary"
    >
      Share
    </Button>
    <ShareModal
      className="border-4"
      classNames={{
        title: "text-positive-secondary",
        modalHeader: "mx-2 rounded-md p-2 bg-positive-secondary",
        modalContent: "p-3 bg-caution-secondary",
        modalHeaderContent: "text-critical-secondary border-4 bg-critical-secondary-hover",
        modalWrapper: "z-10 bg-opacity-90",
      }}
      closeButtonProps={{
        label: "Close share modal",
        onClick: closeModal,
      }}
      link="https://go.setmore.com"
      onClose={closeModal}
      open={openModal}
      translations={{
        description: { primary: 'Share this page with' },
        optionLabels: {
          copyLabel: "Copy Link",
          emailLabel: "Email",
          facebookLabel: "Facebook",
          messengerLabel: "Messenger",
          whatsappLabel: "Whatsapp",
        },
        title: "Share this page",
      }}
    />
  </React.Fragment>
);
View in Playroom
Stylable PartsDescription
rootThe container that wraps the share modal.
titleThe title displayed in the header of the share modal.
modalHeaderThe container that holds and organizes the heading components.
modalHeaderContentThe container that holds the heading text and icon.
modalWrapperThe container that wraps the whole modal element, acts as the overlay as well.
modalContentThe container that holds the main content within the modal body.

NOTE: The content style part has been removed. Use primaryDescription and secondaryDescription style parts instead for styling description text.

ShareModalChildren parts​

const [openModal, setOpenModal] = React.useState(false);

const closeModal = () => {
  setOpenModal(false);
};

return (
  <React.Fragment>
    <Button
      iconStart={ShareIcon}
      label="Share"
      onClick={() => {
        setOpenModal(true);
      }}
      size="standard"
      variant="neutralSecondary"
    >
      Share
    </Button>
    <ShareModal
      className="border-4"
      classNames={{
        optionStack: 'bg-critical',
        optionButton: 'bg-positive',
        track: 'bg-caution',
        primaryDescription: 'text-link',
        secondaryDescription: 'text-body-16'
      }}
      closeButtonProps={{
        label: "Close share modal",
        onClick: closeModal,
      }}
      link="https://anywhereworks.com"
      onClose={closeModal}
      open={openModal}
      translations={{
        description: { primary: 'Anywhereworks', secondary: 'Help the world work Anywhere' },
        optionLabels: {
          copyLabel: "Copy Link",
          emailLabel: "Email",
          facebookLabel: "Facebook",
          messengerLabel: "Messenger",
          whatsappLabel: "Whatsapp",
        },
        title: "Share this page",
      }}
    />
  </React.Fragment>
);
View in Playroom
Stylable PartsDescription
optionStackThe container that wraps the option buttons.
optionButtonThe style for option button.
trackThe container that holds and avatar the description.
primaryDescriptionThe style for primary text.
secondaryDrescriptionThe style for secondary text.

ShareSheetChildren parts​

Note: The bottom sheet renders only on mobile. The qrCode and sheetWrapper style parts apply only while the sheet is visible.

const [openModal, setOpenModal] = React.useState(false);

const closeModal = () => {
  setOpenModal(false);
};

return (
  <React.Fragment>
    <Button
      iconStart={ShareIcon}
      label="Share"
      onClick={() => {
        setOpenModal(true);
      }}
      size="standard"
      variant="neutralSecondary"
    >
      Share
    </Button>
    <ShareModal
      className="border-4"
      classNames={{
        optionStack: 'bg-critical',
        optionButton: 'bg-positive',
        sheetWrapper: 'bg-caution',
        qrCode: 'fill-positive',
      }}
      closeButtonProps={{
        label: "Close share modal",
        onClick: closeModal,
      }}
      link="https://anywhereworks.com"
      onClose={closeModal}
      open={openModal}
      translations={{
        description: { primary: 'Anywhereworks', secondary: 'Help the world work Anywhere' },
        optionLabels: {
          copyLabel: "Copy Link",
          emailLabel: "Email",
          facebookLabel: "Facebook",
          messengerLabel: "Messenger",
          whatsappLabel: "Whatsapp",
        },
        title: "Share this page",
      }}
    />
  </React.Fragment>
);
View in Playroom
Stylable PartsDescription
optionStackThe container that wraps the option buttons.
optionButtonThe style for option button.
sheetWrapperThe container that qrcode and buttons.
qrCodeThe style for qrcode.