Bolt Design System

Twig Usage

  {% include "@bolt-components-share/share.twig" with {
  sources: [
    {
      name: "facebook",
      url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;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

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`
copy_to_clipboard		`object`	—	Refer to the Copy-to-clipboard Component Schema for options
inline	Button version has been removed so this prop is no longer needed.	—	—	—
copyToClipboard	Please use copy_to_clipboard.	—	—	—

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.