Lily Design System™

SharePage

A labeled group of share controls — typically email, copy-link, and one or two social platforms — letting readers send the current page to others without leaving it.

The component is a thin headless wrapper: it renders a role="group" container with an accessible label, then renders one button or link per configured service. Social platforms render as anchors that open the platform's share endpoint with the URL and title pre-filled; copy-link renders as a <button> that calls the Clipboard API (with a textarea-select fallback for older browsers) and announces success via an aria-live="polite" region. The list of services is configurable so consumers can add, remove, or reorder share targets to match their audience.

For mobile-first contexts where the OS share sheet is preferable, prefer the native Web Share API (navigator.share) over this component.

Example

Show demo markup 
<div class="share-page" aria-label="a component for sharing the page on social media">SharePage</div>
Usage example 
<div class="share-page" aria-label="a component for sharing the page on social media">SharePage</div>
Show Svelte source 
// In your Svelte component:
import SharePage from "lily-design-system-svelte-headless/components/SharePage/SharePage.svelte";

<SharePage>
  <!-- content -->
</SharePage>

Usage

<SharePage label="Share this page" url={pageUrl} title={pageTitle} />

Props

PropTypeDefaultDescription
labelstring (required)—Accessible label for the share group (e.g. "Share this page")
urlstring (required)—URL to share
titlestring—Page title shared alongside the URL
servicesarray of { id: string; label: string; href?: string; onClick?: () => void }[email, copy, x, facebook]Services to render
...restPropsHTML attributes—Spread onto the root <div>

Keyboard Interactions

  • Tab cycles through each share control
  • Enter or Space activates the focused control (native button behaviour)

ARIA

  • Wrapper has role="group" with aria-label so the share controls are announced as a related set
  • Each share control has its own aria-label (e.g. "Share on email")
  • The copy-link button announces success via a transient aria-live="polite" region

When to Use

  • Allowing users to share an article, service page, or piece of guidance via email or social platforms
  • Providing a quick "copy link" button on long-form content

When Not to Use

  • Use the platform's native Web Share API (navigator.share) for mobile-first contexts when a unified share sheet is preferable

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .share-page as the root class. No default styles are included.

Related components

  • clipboard-copy-button — single copy-to-clipboard action
  • button-group — grouped action buttons

References

Implementation Notes

  • Renders a labeled group of share buttons (or links) for the current page URL
  • Each share target (e.g. email, Twitter/X, Facebook, copy-link) is rendered as a <button> or <a> depending on the action
  • The list of services is configurable; consumers wire each service's share URL or copy-to-clipboard handler
  • Includes a copy-link button that uses the Clipboard API; falls back to a textarea-and-select fallback when the API is unavailable
  • Spreads restProps onto the root <div>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: share-page
  • PascalCase: SharePage
  • Description: a component for sharing the page on social media
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .share-page
  • Interactive: yes

ARIA

  • Wrapper has role="group" with aria-label so the share controls are announced as a related set
  • Each share control has its own aria-label (e.g. "Share on email")
  • The copy-link button announces success via a transient aria-live="polite" region

Keyboard

  • Tab cycles through each share control
  • Enter or Space activates the focused control (native button behaviour)

Props

  • label: string (required) (default: —) — Accessible label for the share group (e.g. "Share this page")
  • url: string (required) (default: —) — URL to share
  • title: string (default: —) — Page title shared alongside the URL
  • services: array of { id: string; label: string; href?: string; onClick?: () => void } (default: [email, copy, x, facebook]) — Services to render
  • ...restProps: HTML attributes (default: —) — Spread onto the root <div>