MDSocialButton
PROThe 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
// NextJS Material Dashboard 2 components
import MDSocialButton from "/components/MDSocialButton";
// @mui icons-material components
import FacebookIcon from "@mui/icons-material/Facebook";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| size | 'small''medium''large' | medium | Change the MDSocialButton size. |
| color | 'facebook''twitter''instagram''linkedin''pinterest''youtube''github''vimeo''slack''dribbble''reddit''tumblr' | white | Change the MDSocialButton background color similar to the brand color of the name that you want to use. |
| circular | bool | false | If true the MDSocialButton get a rounded or circular shape. |
| iconOnly | bool | false | If true the MDSocialButton will have same width andheight values, its useful when using only icon inside the MDSocialButton component. |
| children* | node | Use to pass node or content inside the MDSocialButton, its the only required prop. |
Icon Only
// NextJS Material Dashboard 2 components
import MDSocialButton from "/components/MDSocialButton";
// @mui icons-material components
import TwitterIcon from "@mui/icons-material/Twitter";
Circular
// NextJS Material Dashboard 2 components
import MDSocialButton from "/components/MDSocialButton";
// @mui icons-material components
import InstagramIcon from "@mui/icons-material/Instagram";