Appearance
Icon buttons
Introducing icon buttons, the simple and user-friendly solution for sharing blogs, pages, articles, products, and more. These buttons are designed to provide a seamless sharing experience with just a single click.
With icon buttons, you can add visually appealing icons representing popular social media platforms, such as Facebook, Twitter, Instagram, LinkedIn, and more. Each button is associated with a specific social media platform, allowing users to easily share your content on their preferred channels.
Usage
javascript
import {
FacebookIcon,
WhatsappIcon,
TelegramIcon,
TwitterIcon,
LinkedInIcon,
RedditIcon,
PinterestIcon,
TumblrIcon,
PocketIcon,
EmailIcon,
CopyIcon
} from 'share-button-links/components/icons';Facebook
html
<FacebookIcon
title="..."
url="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| title | String | Empty | The title of the button/link. |
| url* | String | #! | The url of the button/link to share. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |
WhatsApp
html
<WhatsappIcon
message="..."
url="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| messase | String | Empty | The message of the button/link. |
| url* | String | #! | The url of the button/link to share. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |
Telegram
html
<TelegramIcon
message="..."
url="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| messase | String | Empty | The message of the button/link. |
| url* | String | #! | The url of the button/link to share. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |
Twitter
html
<TwitterIcon
message="..."
url="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| title* | String | Empty | The message of the button/link. |
| url* | String | #! | The url of the button/link to share. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |
LinkedIn
html
<LinkedInIcon
url="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| url* | String | #! | The url of the button/link to share. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |
Reddit
html
<RedditIcon
title="..."
url="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| title* | String | Add title | The title of the button/link. |
| url* | String | #! | The url of the button/link to share. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |
Pinterest
html
<PinterestIcon
description="..."
url="..."
mediaUrl="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| description* | String | Add the description | The description of the button/link. |
| mediaUrl* | String | #! | The image of the button/link to share. |
| url* | String | #! | The url of the button/link to share. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |
Tumblr
html
<TumblrIcon
title="..."
content="..."
url="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| title* | String | Add title | The title of the button/link. |
| url* | String | #! | The url of the button/link to share. |
| content* | String | Add your content | The content of the button/link. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |
Pocket
html
<PocketIcon
title="..."
url="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| title* | String | Add text | The title of the button/link. |
| url* | String | #! | The url of the button/link to share. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |
Email
html
<EmailIcon
to="..."
subject="..."
content="..."
url="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| to | String | Empty | The to (email) of the button/link. |
| subject* | String | Subject | The subject of the button/link. |
| content* | String | Add the content | The content of the button/link. |
| url* | String | #! | The url of the button/link to share. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |
Copy
html
<CopyIcon
url="..."
isRounded
/>| Prop | Type | Default | Comment |
|---|---|---|---|
| url | String | Empty | Add the url if you want. |
| isRounded | Boolean | false | Add little rounded corners. |
| isCircled | Boolean | false | Add full rounded corners. |
| isBordered | Boolean | false | Add border to the buttons and remove. |