VsudSocialButton

PRO

The VsudSocialButton component provides different styles for creating a social media button.

Demo

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

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

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

Props Information

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

Icon Only

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

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

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

Circular

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

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

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