Vue Social Button - Material

PRO

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

Demo

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

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

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

Props Information

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

Icon Only

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

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

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

Circular

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

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

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