share docs

Share

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

Published Last updated: 2.28.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-share/share.twig" with {
  sources: [
    {
      name: "facebook",
      url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&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
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
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
inline

Button version has been removed so this prop is no longer needed.

copyToClipboard

Please use copy_to_clipboard.

Install Install
  npm install @bolt/components-share
Dependencies @bolt/components-copy-to-clipboard @bolt/components-icon @bolt/components-list @bolt/core-v3.x

share

Share this page LinkedIn

share size variations

Small Size

Share this page LinkedIn

Medium Size

Share this page LinkedIn

share opacity variations

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: 100

Share this page LinkedIn

Opacity: 80

Share this page LinkedIn

Opacity: 60

Share this page LinkedIn

Opacity: 40

Share this page LinkedIn

Opacity: 20

Share this page LinkedIn

share align variations

Align: start

Share this page LinkedIn

Align: center

Share this page LinkedIn

Align: end

Share this page LinkedIn

share custom label

This is a custom label LinkedIn

share theme variations

xdark

Share this page LinkedIn
Share this page LinkedIn
Share this page LinkedIn

dark

Share this page LinkedIn
Share this page LinkedIn
Share this page LinkedIn

light

Share this page LinkedIn
Share this page LinkedIn
Share this page LinkedIn

xlight

Share this page LinkedIn
Share this page LinkedIn
Share this page LinkedIn