Bolt Design System

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&amp;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

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`	—	Refer to the Copy-to-clipboard Component Schema for options
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

  npm install @bolt/components-share

Dependencies

@bolt/components-copy-to-clipboard

@bolt/components-icon

@bolt/components-list

@bolt/core-v3.x

Share

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