Buttons

These buttons serve as a convenient way to share links to various social media platforms. Whether you want to share blogs, pages, articles, products, or any other content, these buttons provide an easy-to-use interface for sharing your desired links.

Usage

javascript

import {
  ButtonFacebook,
  ButtonWhatsapp,
  ButtonTelegram,
  ButtonTwitter,
  ButtonLinkedIn,
  ButtonReddit,
  ButtonPinterest,
  ButtonTumblr,
  ButtonPocket,
  ButtonEmail,
  ButtonCopy
} from 'share-button-links/components/buttons';

Facebook

html

<ButtonFacebook
  title="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
title	String	Empty	The title of the button/link.
text*	String	Add text	The text 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.
hasIcon	Boolean	false	Add the facebook icon.

html

<ButtonWhatsapp
  text="..."
  url="..."
  message="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
message	String	Empty	Here you can add a message when you share the url to Whatsapp.
isRounded	Boolean	false	Add little rounded corners.
isCircled	Boolean	false	Add full rounded corners.
isBordered	Boolean	false	Add border to the buttons and remove.
hasIcon	Boolean	false	Add the whatsapp icon.

html

<ButtonTelegram
  text="..."
  url="..."
  message="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
message	String	Empty	Here you can add a message when you share the url to Whatsapp.
isRounded	Boolean	false	Add little rounded corners.
isCircled	Boolean	false	Add full rounded corners.
isBordered	Boolean	false	Add border to the buttons and remove.
hasIcon	Boolean	false	Add the telegram icon.

Twitter

html

<ButtonTwitter
  title="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
title*	String	Add titke	The title of the button/link.
text*	String	Add text	The text 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.
hasIcon	Boolean	false	Add the twitter icon.

html

<ButtonLinkedIn
  text="..."
  url="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
text*	String	Add text	The text 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.
hasIcon	Boolean	false	Add the linkedin icon.

html

<ButtonReddit
  title="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
title*	String	Add title	The title of the button/link.
text*	String	Add text	The text 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.
hasIcon	Boolean	false	Add the reddit icon.

html

<ButtonPinterest
  description="..."
  url="..."
  text="..."
  mediaUrl="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
description*	String	Add the description	The description of the button/link.
text*	String	Add text	The text of the button/link.
url*	String	#!	The url of the button/link to share.
mediaUrl*	String	#!	The image 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.
hasIcon	Boolean	false	Add the pinterest icon.

Tumblr

html

<ButtonTumblr
  title="..."
  content="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
title*	String	Add title	The title of the button/link.
content	String	Add your content	The content of the button/link.
text*	String	Add text	The text 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.
hasIcon	Boolean	false	Add the tumblr icon.

Pocket

html

<ButtonPocket
  title="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
title	String	Empty	The title of the button/link.
text*	String	Add text	The text 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.
hasIcon	Boolean	false	Add the pocket icon.

Email

html

<ButtonEmail
  title="..."
  subject="..."
  content="..."
  text="..."
  url="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
title*	String	Add title	The title of the button/link.
to	String	Empty	The to (email) of the button/link.
subject*	String	Add title	The subject of the button/link.
content*	String	Add your content	The content of the button/link.
text*	String	Add text	The text 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.
hasIcon	Boolean	false	Add the Email icon.

Copy

html

<ButtonCopy
  text="..."
  url="..."
  isRounded
  hasIcon
/>

Props

Props with * are required.

Prop	Type	Default	Comment
text*	String	Add text	The text of the button/link.
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.
hasIcon	Boolean	false	Add the copy icon.

Buttons ​

Usage ​

Facebook ​

Props ​

WhatsApp ​

Props ​

Telegram ​

Props ​

Twitter ​

Props ​

LinkedIn ​

Props ​

Reddit ​

Props ​

Pinterest ​

Props ​

Tumblr ​

Props ​

Pocket ​

Props ​

Email ​

Props ​

Copy ​

Props ​

Buttons

Usage

Facebook

Props

WhatsApp

Props

Telegram

Props

Twitter

Props

LinkedIn

Props

Reddit

Props

Pinterest

Props

Tumblr

Props

Pocket

Props

Email

Props

Copy

Props