VuiSocialButton
PROThe VuiSocialButton component provides different styles for creating a social media button.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Demo
// Vision UI Dashboard React components
import VuiSocialButton from "components/VuiSocialButton";
// @mui icons-material components
import FacebookIcon from "@mui/icons-material/Facebook";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| size | 'small''medium''large' | medium | Change the VuiSocialButton size. |
| color | 'facebook''twitter''instagram''linkedin''pinterest''youtube''github''vimeo''slack''dribbble''reddit''tumblr' | white | Change the VuiSocialButton background color similar to the brand color of the name that you want to use. |
| circular | bool | false | If true the VuiSocialButton get a rounded or circular shape. |
| iconOnly | bool | false | If true the VuiSocialButton will have same width andheight values, its useful when using only icon inside the VuiSocialButton component. |
| children* | node | Use to pass node or content inside the VuiSocialButton, its the only required prop. |
Icon Only
// Vision UI Dashboard React components
import VuiSocialButton from "components/VuiSocialButton";
// @mui icons-material components
import TwitterIcon from "@mui/icons-material/Twitter";
Circular
// Vision UI Dashboard React components
import VuiSocialButton from "components/VuiSocialButton";
// @mui icons-material components
import InstagramIcon from "@mui/icons-material/Instagram";