Share

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

Published Last updated: 3.1.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-share/share.twig' with {
  sources: [
    {
      name: 'facebook',
      url: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse'
    },
    {
      name: 'twitter',
      url: 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
    },
    {
      name: 'linkedin',
      url: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com'
    },
    {
      name: 'email',
      url: '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.
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 —
  • [items]:
    • Type:object
    • Properties:
      • name

        Name of the social media source.

        • Type: string
        • Enum: facebook , twitter , linkedin , email
      • url

        The specifically formed share URL with query string.

        • Type: string
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.

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