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