Styling with CSS

Component default styles

The base for visual customization of the <SocialShare> buttons are the builtin CSS classes:

• .social-share-button
• .social-share-button--{network name}
• .social-share-button--styled (only if styled is set to true)
• .social-share-button__icon
• .social-share-button__label

and the CSS brand color variable, applied to the <a> element, and available to all its children:

• --color-brand

CSS Specificity

The component CSS styles are placed inside a @layer components CSS layer.

Using a layer ensures a lower specicifity over regualar unlayered CSS, allowing for easy overwriting with your own customizations.