Vue Social Button - Argon

PRO

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

Demo

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

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

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

Props Information

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

Icon Only

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

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

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

Circular

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

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

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