MDSocialButton

PRO

The MDSocialButton 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

// Material Dashboard 2 React Components import MDSocialButton from "components/MDSocialButton"; // @mui icons-material components import FacebookIcon from "@mui/icons-material/Facebook";

Props Information

NameTypeDefaultDescription
size'small''medium''large'mediumChange the MDSocialButton size.
color'facebook''twitter''instagram''linkedin''pinterest''youtube''github''vimeo''slack''dribbble''reddit''tumblr'whiteChange the MDSocialButton background color similar to the brand color of the name that you want to use.
circularboolfalseIf true the MDSocialButton get a rounded or circular shape.
iconOnlyboolfalseIf true the MDSocialButton will have same width andheight values, its useful when using only icon inside the MDSocialButton component.
children*nodeUse to pass node or content inside the MDSocialButton, its the only required prop.

Icon Only

// Material Dashboard 2 React Components import MDSocialButton from "components/MDSocialButton"; // @mui icons-material components import TwitterIcon from "@mui/icons-material/Twitter";

Circular

// Material Dashboard 2 React Components import MDSocialButton from "components/MDSocialButton"; // @mui icons-material components import InstagramIcon from "@mui/icons-material/Instagram";