share docs

Share

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

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

share

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.

share size variations

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.

share display variations

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.

share opacity variations

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.

share align variations

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.

share theme variations

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.

share use case custom title

Custom title Title can be customized to display whatever text is needed. Use the text prop to control it. Demo
This is a custom title Share via LinkedIn Copying...
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.