Attributes

Use attributes to make quick changes to the share button.

Icon

There are seven icons available.

1234567

Change the icon attribute to the icon you want to use:

<share-button icon="3"></share-button>

By default, the button uses icon 1.

The share button uses the fantastic Remix Icon Library.

Text

The button defaults to "Share." Customize text by adding it between the tags:

<share-button>Compartir</share-button>

For a button without text, use the circle attribute. The attribute makes the button round, omitting the text and keeping the icon centered.

<share-button circle></share-button>

For a button without an icon, set the icon attribute to false.

<share-button icon="false"></share-button>

Color

Use the color-button attribute to change the button's color. Any valid CSS value works.

<share-button color-button-bg="#f02c69"></share-button>

You can also change the color of the button's text with color-button-text:

<share-button
  color-button-bg="lch(85% 130.5 140.21)"
  color-button-text="#000"
></share-button>

Change the popover color and text like this:

<share-button
  color-popover-bg="#f02c69"
  color-popover-text="#fff"
></share-button>

Here is the full list of color attributes and their default values:

Attribute	Description	Default
color-button-bg	Button background	hsl(242deg 55.5% 2.74%)
color-button-text	Button text	hsl(242deg 9.58% 98%)
color-popover-bg	Popover background	hsl(242deg 9.58% 98%)
color-popover-bg	Popover background hover	hsl(242deg 9.58% 88%)
color-popover-text	Popover text	hsl(242deg 55.5% 2.74%)

Networks

You can specify which social networks your share button shows as well as their order.

Available networks include:

• X (formerly Twitter)
• LinkedIn
• Facebook
• Email (opens an email client if configured)
• WhatsApp
• Telegram
• Copy (copies the current URL to the user's clipboard)

By default, all options are present, in the order above.

To customize networks and their order, use the networks attribute and pass in the desired networks in a comma-separated list. Networks will appear in the same order as entered.

<share-button networks="email,copy,facebook"></share-button>

Hey there!

Don't see a network you want to use? File a GitHub issue to get it added!

Inline share buttons

It's also possible to only display the social media icons and omit the button altogether using the atomic attribute:

<share-button atomic></share-button>

Sticky share button

By default, the button appears wherever you add it to the page. However, it's also possible to make give it a fixed or sticky position at the bottom of the page.

Use the position attribute with left, center, or right to customize the button's position.

<share-button position="left"></share-button>