SuiSocialButton

PRO

The 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

NameTypeDefaultDescription
size'small''medium''large'mediumChange the SuiSocialButton size.
color'facebook''twitter''instagram''linkedin''pinterest''youtube''github''vimeo''slack''dribbble''reddit''tumblr'whiteChange the SuiSocialButton background color similar to the brand color of the name that you want to use.
circularboolfalseIf true the SuiSocialButton get a rounded or circular shape.
iconOnlyboolfalseIf true the SuiSocialButton will have same width andheight values, its useful when using only icon inside the SuiSocialButton component.
children*nodeUse 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";