ShareButtons

ShareButtons renders a "Share" label and one button per network. Facebook, X, LinkedIn, WhatsApp and email open a share link; nativeShare opens the device's share sheet through the Web Share API. Payload's single-post template renders it from the General Settings share options, and you can use it on any page.

import { ShareButtons } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="w-full max-w-md">
      <ShareButtons
        title="Designing with tokens from day one"
        url="https://example.com/journal/designing-with-tokens"
        networks={['facebook', 'x', 'linkedin', 'email']}
      />
    </div>
  )
}

ImportLink to this section

import { ShareButtons } from '@systhemaui/next'

In a React app without Next.js, import it from @systhemaui/react.

NetworksLink to this section

networks lists the buttons in order. An empty array renders nothing.

url defaults to the current page (window.location.href), read after hydration; until then the link buttons are not rendered, so the server HTML never contains a share link with an empty target. The nativeShare button only appears in browsers that support navigator.share. Support is good on mobile and patchy on desktop, so pair it with link networks.

Button stylesLink to this section

buttonStyle sets the look of the buttons: icon (default, round icon buttons), icon-label (icon and network name) or pills (bordered pills with icon and name). It is called buttonStyle so it does not clash with React's style prop.

import { ShareButtons } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-8">
      <ShareButtons
        title="Designing with tokens from day one"
        url="https://example.com/journal/designing-with-tokens"
        networks={['facebook', 'linkedin', 'email']}
        buttonStyle="icon-label"
      />
      <ShareButtons
        title="Designing with tokens from day one"
        url="https://example.com/journal/designing-with-tokens"
        networks={['facebook', 'linkedin', 'email']}
        buttonStyle="pills"
      />
    </div>
  )
}

PositionLink to this section

position pins the bar:

• inline (default): in the page flow, label on the left and buttons on the right.
• sticky-bottom: a full-width bar fixed to the bottom of the viewport, on the surface background with a top border.
• floating-sidebar: a vertical rail fixed in the left gutter, vertically centered, from lg up. Below lg it stays in the page flow as a vertical stack.

Both pinned positions use position: fixed, not sticky, so the bar escapes the centered container it is rendered in. Leave room at the bottom of the page for a sticky-bottom bar so it does not cover the last lines.

import { Paragraph, ShareButtons } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex min-h-80 w-full max-w-xl flex-col gap-4 pb-24">
      <Paragraph>The share bar stays at the bottom of the viewport while the post scrolls.</Paragraph>
      <ShareButtons
        title="Designing with tokens from day one"
        url="https://example.com/journal/designing-with-tokens"
        networks={['facebook', 'x', 'linkedin', 'email']}
        position="sticky-bottom"
      />
    </div>
  )
}

import { Paragraph, ShareButtons } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex min-h-80 w-full max-w-xl flex-col gap-4">
      <Paragraph>From the lg breakpoint up, the share rail floats in the left gutter, outside the reading column.</Paragraph>
      <ShareButtons
        title="Designing with tokens from day one"
        url="https://example.com/journal/designing-with-tokens"
        networks={['facebook', 'x', 'linkedin', 'email']}
        position="floating-sidebar"
      />
    </div>
  )
}

ExamplesLink to this section

Translating the labelsLink to this section

labels sets the heading (default "Share"), each network's accessible name (default "Share on Facebook" and so on) and opensInNewTab, the cue added in parentheses to every link that opens a new tab. Pass opensInNewTab without parentheses. Payload's single-post template fills these from the frontend message catalog.

<ShareButtons
  title={post.title}
  networks={['facebook', 'linkedin', 'email']}
  labels={{
    heading: 'Megosztás',
    facebook: 'Megosztás Facebookon',
    linkedin: 'Megosztás LinkedInen',
    email: 'Küldés e-mailben',
    opensInNewTab: 'új lapon nyílik meg',
  }}
/>

Your own iconsLink to this section

The buttons show built-in SVG glyphs. renderNetwork(network, label) replaces a button's content, for example with your icon set. It is a function prop, so pass it from a client module.

'use client'

import { ShareButtons } from '@systhemaui/next'
import { BrandIcon } from '@/components/BrandIcon'

export function PostShare({ title }: { title: string }) {
  return (
    <ShareButtons
      title={title}
      networks={['facebook', 'x', 'linkedin']}
      renderNetwork={(network) => <BrandIcon name={network} aria-hidden="true" />}
    />
  )
}

PropsLink to this section

HTML and CSSLink to this section

ShareButtons is built from Stack, the text-label type and Icon, so it has no CSS of its own except the label, style and position hooks (.post-share-button-label, .post-share-icon-label, .post-share-pills, .post-share-sticky-bottom, .post-share-floating-sidebar) in the posts CSS layer.

<div class="stack flex flex-row items-center justify-between gap-md post-share post-share-pills">
  <span class="post-share-heading text-label color-label">Share</span>
  <div class="stack flex flex-row items-center gap-sm post-share-list">
    <a
      class="icon"
      href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fpost"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Share on Facebook (opens in new tab)"
    >
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">…</svg>
      <span class="post-share-button-label">Share on Facebook</span>
    </a>
  </div>
</div>

Next.jsLink to this section

@systhemaui/next re-exports ShareButtons from @systhemaui/react unchanged. It is a client component.

AccessibilityLink to this section

• Every button has an accessible name: the network label, plus "(opens in new tab)" for links that open one. The icons are aria-hidden with focusable="false".
• In the icon-label and pills styles the visible text matches the start of the accessible name, so voice-control users can say what they see.
• New-tab links carry rel="noopener noreferrer".

RelatedLink to this section

• Listings and sharing
• Icon