Share

A list of share-to-social-media actions.

Published Last updated: 4.5.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-share/share.twig' with {
  sources: [
    {
      name: 'facebook',
      attributes: {
        href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse'
      }
    },
    {
      name: 'twitter',
      attributes: {
        href: 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
      }
    },
    {
      name: 'linkedin',
      attributes: {
        href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com'
      }
    },
    {
      name: 'email',
      attributes: {
        href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
      }
    }
  ],
  copy_to_clipboard: {
    text_to_copy: 'https://boltdesignsystem.com'
  },
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Share
Prop Name Description Type Default Value Option(s)
attributes

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

object
text

Defines the label text in front of the social icons.

string Share this page
size

Controls the size of icons and spacing.

string medium
  • small or medium
align

Controls the horizontal alignment of label text and icons.

string start
  • start, center, end
opacity

Controls the overall transparency of the share tool.

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

Social media sources to share to.

array
  • See below
display

Controls the display of the share options.

string inline
  • inline or menu
copy_to_clipboard
object
inline
(deprecated)

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

copyToClipboard
(deprecated)

Please use copy_to_clipboard.

Share: items
Prop Name Description Type Default Value Option(s)
name

Name of the social media source.

string
  • facebook, twitter, linkedin, email
attributes

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

object
url
(deprecated)

Please pass the href value through the source attributes object.

Install Install
npm install @bolt/components-share
Dependencies @bolt/components-copy-to-clipboard @bolt/components-list @bolt/components-menu @bolt/core-v3.x @bolt/elements-icon