Share bar

Share bar

The share components contain a button or a list of buttons. The most common buttons we can find in a share component are links to social media platforms. Messaging apps could also be included. Additionally, it is possible to share content through more traditional channels like sending it by e-mail or printing.

Implementations

The component ShareBar is available in the following technologies:

Web Components

Parameters

Parameters

Make sure you have read about the parameters in here.

The parametrization of the component can be done with the following custom params or properties:

Name	Type	Slot	Description
content	string	✅	The quote content
social	object	✅	The social media links
mailto	string		The email link
custom	object		A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: <z-share-bar custom='{"fill":"#06e7a3"}' /> Check the available values in the customization section.
custom-str	string		The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters. Example: <z-share-bar custom-str="fill:#06e7a3" />
z-theme	string		Sets the theme of the component. The possible values are light and dark. <z-share-bar z-theme="dark" />

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS Variable	Type	Description
--z-share-bar--bg	color	Background color of the share bar
--z-share-bar--color	color	Text color of the share bar

Both background and color can be customized using the --z-share-bar-bg and --z-share-bar-color custom tokens.

Share bar

Accessibility

...

Related components