React Social Button - Soft UI

PRO

The SoftSocialButton 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 SoftSocialButton from "components/SoftSocialButton"; // @mui icons-material components import FacebookIcon from "@mui/icons-material/Facebook";

Props Information

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

Icon Only

// Soft UI Dashboard React components import SoftSocialButton from "components/SoftSocialButton"; // @mui icons-material components import TwitterIcon from "@mui/icons-material/Twitter";

Circular

// Soft UI Dashboard React components import SoftSocialButton from "components/SoftSocialButton"; // @mui icons-material components import InstagramIcon from "@mui/icons-material/Instagram";