Share

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

Published

Last updated: 4.0.0

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

Basic Share

Share is a list of social media links. Each link will enable the user to share a URL to a particular social media platform.

Demo

Twig

{% 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 %}

HTML

Not available in plain HTML. Please use Twig.

Title, icon, and spacing size

Share is available in small and medium sizes. Use the size prop to control the title text size, the icon size, and the spacing between the icons.

Demo

Twig

{% include '@bolt-components-share/share.twig' with { size: 'small', sources: var_foo, copy_to_clipboard: var_bar, } only %}

HTML

Not available in plain HTML. Please use Twig.

Menu display

Share can be turned into a menu and used in a popover.

Demo

Twig

{% set popover_trigger %} {% include '@bolt-elements-button/button.twig' with { content: 'Share menu', attributes: { type: 'button' } } only %} {% endset %} {% set popover_content %} {% include '@bolt-components-share/share.twig' with { display: 'menu', sources: var_foo, copy_to_clipboard: var_bar, } only %} {% endset %} {% include '@bolt-components-popover/popover.twig' with { trigger: popover_trigger, content: popover_content, spacing: 'none', } only %}

HTML

Not available in plain HTML. Please use Twig.

Opacity

Inline share is available in various opacities. Use the opacity prop to control it.

Important Notes:

Opacity will make the share tool semi-transparent, and transparency goes away if user hovers over it. This should be used if you don't want the share tool to create too much distractions on first impression.

Opacity does not work with menu display.

Demo

Twig

{% include '@bolt-components-share/share.twig' with { opacity: 60, sources: var_foo, copy_to_clipboard: var_bar, } only %}

HTML

Not available in plain HTML. Please use Twig.

Horizontal alignment

Inline share is available in various horizontal alignments. Use the align prop to control it.

Important Notes:

Share is a block level component and it takes up the full width of its parent container, horizontal alignment is depended on that width.

Align does not work with menu display.

Demo

Twig

{% include '@bolt-components-share/share.twig' with { align: 'center', sources: var_foo, copy_to_clipboard: var_bar, } only %}

HTML

Not available in plain HTML. Please use Twig.

Theme compatibility

Share can be used in various themes.

Demo

Twig

<div class="t-bolt-dark"> // Put the component inside a themed container {% include '@bolt-components-share/share.twig' with { sources: var_foo, copy_to_clipboard: var_bar, } only %} </div>

HTML

Not available in plain HTML. Please use Twig.

Custom title

Title can be customized to display whatever text is needed. Use the text prop to control it.

Demo

Twig

{% include '@bolt-components-share/share.twig' with { text: 'This is a custom title', sources: var_foo, copy_to_clipboard: var_bar, } only %}

HTML

Not available in plain HTML. Please use Twig.

share

share docs Show Code Hide Code

Share

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

share Show Code Hide Code

share size variations Show Code Hide Code

share display variations Show Code Hide Code

share opacity variations Show Code Hide Code

share align variations Show Code Hide Code

share theme variations Show Code Hide Code

share use case custom title Show Code Hide Code

share docs

share

share size variations

share display variations

share opacity variations

share align variations

share theme variations

share use case custom title