Vue Social Button - Material

PRO

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

Demo

<script setup>
// Vue Material Kit 2 component
import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
</script>
<template>
 <MaterialSocialButton
  color="facebook"
  component="facebook"
  label="Facebook"
 />
 <MaterialSocialButton
  color="twitter"
  component="twitter"
  label="Twitter"
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
4</script>
5<template>
6 <MaterialSocialButton
7  color="facebook"
8  component="facebook"
9  label="Facebook"
10 />
11 <MaterialSocialButton
12  color="twitter"
13  component="twitter"
14  label="Twitter"
15 />
16</template>

Props Information

Name	Type	Default	Description
route	String		Used to set `route` to the `MaterialSocialButton` component.
color*	'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.
component*	String		Used to set icon to the `MaterialSocialButton` component. It is a required prop.
label	String		Used to set label 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.
rounded	bool	false	If `true` the `MaterialSocialButton` will get a rounded or circular shape.

Icon Only

<script setup>
// Vue Material Kit 2 component
import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
</script>
<template>
 <MaterialSocialButton
  color="facebook"
  component="facebook"
  iconOnly
 />
 <MaterialSocialButton
  color="twitter"
  component="twitter"
  iconOnly
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
4</script>
5<template>
6 <MaterialSocialButton
7  color="facebook"
8  component="facebook"
9  iconOnly
10 />
11 <MaterialSocialButton
12  color="twitter"
13  component="twitter"
14  iconOnly
15 />
16</template>

Rounded

<script setup>
// Vue Material Kit 2 components
import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
</script>
<template>
 <MaterialSocialButton
  color="facebook"
  component="facebook"
  iconOnly
  rounded
 />
 <MaterialSocialButton
  color="twitter"
  component="twitter"
  iconOnly
  rounded
 />
</template>

1<script setup>
2// Vue Material Kit 2 components
3import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
4</script>
5<template>
6 <MaterialSocialButton
7  color="facebook"
8  component="facebook"
9  iconOnly
10  rounded
11 />
12 <MaterialSocialButton
13  color="twitter"
14  component="twitter"
15  iconOnly
16  rounded
17 />
18</template>