--- title: "Component" description: "How to use the component." canonical_url: "https://nuxt-social-share.stefanobartoletti.it/usage/component" last_updated: "2026-07-29T16:43:23.354Z" --- ## Using the component The `` component is the primary way to add social share buttons to your site. Each component instance provides a share button for a single social network, that you must select with the required `network` prop; you will need to use it as many times as your total needed networks. ```vue ``` ```vue ``` See the example about adding [multiple buttons](/examples/multiple-buttons). ## Rendered HTML The component will render by default the following minimal HTML: ```html ``` Additionally: - a `social-share-button--styled` class will be added to the `` element if `:styled="true"` - the `` element will be rendered conditionally according to the `label` prop. - the ` ∗ These props can also be set globally from the module options. They are available also on a component level to allow a different behavior on a single instance. ### `network` - Required: `Yes` - Type: `String` - Default: none The social network or messaging service where the content should be shared, to be chosen among the list of [supported networks](/usage/supported-networks). **This is required for the component to work**. ### `styled` ∗ - Required: `No` - Type: `Boolean` - Default: `false` Whether the component should be styled or not. It is `false` by default to allow for easier custom styling. Additional customization is possible also when set to `true`. ### `label` ∗ - Required: `No` - Type: `Boolean` - Default: `true` Whether the text label should be rendered or not. ### `icon` ∗ - Required: `No` - Type: `Boolean` - Default: `true` Whether the icon should be rendered or not. ### `url` - Required: `No` - Type: `String` - Default: the current page URL The URL that will be shared on the selected social network. Defaults to the current page URL. On most cases you don't need another value, but if you need to change it, you can set it with this prop. ### `title` - Required: `No` - Type: `String` - Default: none Title used as a parameter of the sharing URL, in networks that support it. Optional, check the list of [supported networks](/usage/supported-networks). ### `user` - Required: `No` - Type: `String` - Default: none Username used as a parameter of the sharing URL, in networks that support it. Optional, check the list of [supported networks](/usage/supported-networks). ### `hashtags` - Required: `No` - Type: `String` - Default: none Comma separated list of hashtags used as a parameter of the sharing URL, in networks that support it. Optional, check the list of [supported networks](/usage/supported-networks). ### `image` - Required: `No` - Type: `String` - Default: none Image path used as a parameter of the sharing URL, in networks that support it. Optional, check the list of [supported networks](/usage/supported-networks). ### `prompt` - Required: `No` - Type: `String` - Default: `Read this page so I can ask questions about it:` Instructional text prepended to the page URL when building the prompt for AI networks (i.e. ChatGPT, Claude, Gemini, Perplexity, Grok). Only used by networks that support it, check the list of [supported networks](/usage/supported-networks). ### `rel` - Required: `No` - Type: `String` - Default: `nofollow noopener noreferrer` Sets some default values to the `rel` attribute of the link anchor. Customizable if needed, sets by default the [`nofollow`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel#nofollow), [`noopener`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel#noopener) and [`noreferrer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel#noreferrer) for both SEO and security concerns. ## Slots These slots are still affected by respective `label` and `icon` settings, either being provided by the module options or by the component props. If set to `false`, no label or icon will be rendered, even if a custom value is provided in the respective slots. ### `label` Used to customize the button's label. Optional, defaults to *"Share"*, *"Send"*, *"Save"* or *"Ask AI"* according to the network's category, if not provided. Example: ```vue-html ``` ### `icon` Used to customize the button's icon. Useful when another icon style is required. Optional, defaults to the internal style icons if not provided. Both a raw `svg` or a custom component can be used. Works nicely with the [NuxtIcon](https://nuxt.com/modules/icon) module, if used. ```vue-html ``` ## Styling The `` component comes unstyled by default, only providing some minimal flex properties to correctly align icon and label, to allow for easy integration in any kind of UI. This behavior can be easily overridden by using the `:styled="true"` prop. Both the styled and unstyled versions can be further customized, mainly by working directly with its CSS. In addition to the CSS classes shown above, each button also has a *local* `--color-brand` CSS variable, that can be used to customize each instance. Some examples of customization can be found it the [styling page](/examples/custom-styling)