Share block. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-share


The share component provides the user a visual queue to share the content with relevant peers, as well as an easy mechanism to actively do the sharing.

OG Tags


<meta property="og:type" content="article" />
<meta property="og:title" content="Bolt Design System: Page Title" />
<meta property="og:description" content="Sample description" />
<meta property="og:image" content="" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="480" />
<meta property="og:image:height" content="480" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="Bolt Design System" />
<!-- Twitter specific tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Bolt Design System: Page Title" />
<meta name="twitter:description" content="Sample description" />
<meta name="twitter:image" content="" />
<meta name="twitter:site" content="@pega" />

Best Practices

  • Don't use the share tool with a page's related sections
  • Implement any "stickiness" and placement functionality on the platform the component is being used in
  • For larger screens, ease-in opacity from 0% to 100% on scroll. The placement should be lower right-hand side and fixed until the main page content is scrolled pass
  • Don't have the fixed position of the component overlap any "related content"
  {% include "@bolt-components-share/share.twig" with {
  sources: [
      name: "facebook",
      url: ""
      name: "twitter",
      url: "!"
      name: "linkedin",
      url: ""
      name: "email",
      url: "mailto:?&body=Sample%20Text%20--%20https%3A//"
  copy_to_clipboard: {
    text_to_copy: ""
} only %}
Name Type Value(s) Description Default
attributes object

A Drupal-style attributes object with extra attributes to append to this component.

text string

Defines the label text in front of the social icons.

Share this page
size string
  • small OR medium

Controls the size of icons and spacing.

align string
  • start, center, end

Controls the horizontal alignment of label text and icons.

opacity integer
  • 100, 80, 60, 40, 20

Controls the overall transparency of the share tool.

sources array
  • [items]:
    • Type: object
    • Properties:
      • name

        Name of the social media source.

        • Type: string
      • url

        The specifically formed share URL with query string.

        • Type: string

Social media sources to share to.

copy_to_clipboard object
  • @bolt-components-copy-to-clipboard/copy-to-clipboard.schema.yml > Object details
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

      Type: object
    • text


      This property has been renamed trigger_text

      Type: string
    • copiedText


      Use the custom_confirmation property instead if you need to change the confirmation text.

      Type: string
    • iconSize


      Use custom_trigger, custom_transition, and custom_confirmation properties if you need to change icon size.

      Type: string
    • url


      This property has been renamed text_to_copy

      Type: string
    • trigger_text

      Text to use for the inital copy button. Ignored if the custom_trigger property is used.

      Type: string
    • text_to_copy

      The text to copy to the clipboard.

      Type: string
    • custom_trigger

      (optional) Custom content to show for the initial copy trigger. If you pass a link, set the URL to '#!' since it should not being followed.

      Type: string OR object OR array
    • custom_transition

      (optional) Custom content to show while copy is in progress. This content will be rotated while the copying happens, so it's recommended to pass an icon.

      Type: string OR object OR array
    • custom_confirmation

      (optional) Custom content to show after a successful copy.

      Type: string OR object OR array


Button version has been removed so this prop is no longer needed.



Please use copy_to_clipboard.


Small Size

Medium Size

Opacity will make the share tool semi-transparent, and transparency goes away if user hovers over it. This should be used if you don't want the share tool to create too much distractions on first impression.

Opacity: 100

Opacity: 80

Opacity: 60

Opacity: 40

Opacity: 20

Align: start

Align: center

Align: end