Share

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

Published Last updated: 4.0.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-icon @bolt/components-list @bolt/core-v3.x