Vue SocialButtons - Soft UI

PRO

Social Media Buttons are clickable icons displayed on web pages to allow website visitors to share content on their personal social networking profiles. Our examples provide different styles for creating a social media button.

Demo

Use this example to create a simple Facebook social button with text.

<template>
 <soft-social-button
  icon="fab fa-facebook-square"
  socialBtn="facebook">
  Facebook
 />
</template>

<script>
import SoftSocialButton from "@/components/SoftSocialButton.vue";
export default { components: { SoftSocialButton, }, };
</script>

1<template>
2 <soft-social-button
3  icon="fab fa-facebook-square"
4  socialBtn="facebook">
5  Facebook
6 />
7</template>
8
9<script>
10import SoftSocialButton from "@/components/SoftSocialButton.vue";
11export default { components: { SoftSocialButton, }, };
12</script>

Props Information

Name	Type	Default	Description
size	'sm''md''lg'		Change the `SoftSocialButton` size.
icon*	String		Used to set `icon` to the `SoftSocialButton` component.
iconOnly	bool	false	If `true` the `SoftSocialButton` will have same `width` and`height` values, its useful when using only icon inside the `SoftSocialButton` component.
socialBtn*	'facebook''twitter''instagram''linkedin''pinterest''youtube''github''vimeo''slack''dribbble''reddit''tumblr'	white	Used to set the background of `SoftSocialButton` with the same icon brand color.
rounded	bool	false	If `true` the `SoftSocialButton` get a rounded or circular shape.
slot	node		The `SoftSocialButton` has a default slot that you can pass node or content inside it.

Use this example to create a simple and versatile Twitter social button with icon (only).

<template>
 <soft-social-button
  icon="fab fa-twitter-square"
  socialBtn="twitter"
  iconOnly="true"
  size="lg"
 />
</template>

<script>
import SoftSocialButton from "@/components/SoftSocialButton.vue";
export default { components: { SoftSocialButton, }, };
</script>

1<template>
2 <soft-social-button
3  icon="fab fa-twitter-square"
4  socialBtn="twitter"
5  iconOnly="true"
6  size="lg"
7 />
8</template>
9
10<script>
11import SoftSocialButton from "@/components/SoftSocialButton.vue";
12export default { components: { SoftSocialButton, }, };
13</script>

Use this example to create a circular Instagram social button with icon (only).

<template>
 <soft-social-button
  icon="fab fa-instagram-square"
  socialBtn="instagram"
  iconOnly="true"
  rounded
 />
</template>

<script>
import SoftSocialButton from "@/components/SoftSocialButton.vue";
export default { components: { SoftSocialButton, }, };
</script>

1<template>
2 <soft-social-button
3  icon="fab fa-instagram-square"
4  socialBtn="instagram"
5  iconOnly="true"
6  rounded
7 />
8</template>
9
10<script>
11import SoftSocialButton from "@/components/SoftSocialButton.vue";
12export default { components: { SoftSocialButton, }, };
13</script>

Vue SocialButtons - Soft UI

Demo

Props Information

Icon Only Social Button

Circular Social Button