Socials

The Socials component is a collection of buttons or icons that link to social media platforms or accounts. The Socials component can use the Font Awesome icons library to display the logos of the social media platforms. The Socials component can also have different sizes, colors, or styles.

You can find the SocialButtons component in the src/views/SocialButtons.jsx file.

Examples

A customizable social button featuring animated effects in various styles for engaging user interactions. Social Button Preview

Preview

Result

Code

Social Buttons

import SocialButton from "@/components/SocialButton/SocialButton";

function MyComponent() {
    return (
        <>
            <SocialButton
                icon="fa fa-envelope"
                effect="bolb"
                color="#0072c6"
                bgColor="#ddd"
                hoverBgColor="#0072c6"
                type="rounded"
            />
            <SocialButton
                icon="fa-brands fa-facebook-f"
                effect="bolb"
                color="#3b5998"
                bgColor="#ddd"
                hoverBgColor="#3b5998"
                type="rounded"
            />
            <SocialButton
                icon="fa-brands fa-linkedin-in"
                effect="bolb"
                color="#0077b5"
                bgColor="#ddd"
                hoverBgColor="#0077b5"
                type="rounded"
            />
            <SocialButton
                icon="fa-brands fa-github"
                effect="bolb"
                color="#6e5494"
                bgColor="#ddd"
                hoverBgColor="#6e5494"
                type="rounded"
            />
            <SocialButton
                icon="fa-brands fa-codepen"
                effect="bolb"
                color="#212121"
                bgColor="#ddd"
                hoverBgColor="#212121"
                type="rounded"
            />
        </>
    );
}

export default MyComponent;

Square A square-shaped social button with captivating hover effects for interactive

user experiences. Social Button Preview

Preview

Result

Code

Social Buttons

import SocialButton from "@/components/SocialButton/SocialButton";

function MyComponent() {
    return (
        <>
            <SocialButton
                icon="fa-brands fa-facebook-f"
                color="#837e78"
                hoverColor="#212121"
                bgColor="none"
                type="square"
                border="1px solid #837e78"
                hoverBorder="1px solid #212121"
            />
            <SocialButton
                icon="fa-brands fa-twitter"
                color="#837e78"
                hoverColor="#212121"
                bgColor="none"
                type="square"
                border="1px solid #837e78"
                hoverBorder="1px solid #212121"
            />
            <SocialButton
                icon="fa-brands fa-instagram"
                color="#837e78"
                hoverColor="#212121"
                bgColor="none"
                type="square"
                border="1px solid #837e78"
                hoverBorder="1px solid #212121"
            />
            <SocialButton
                icon="fa-brands fa-vimeo-v"
                color="#837e78"
                hoverColor="#212121"
                bgColor="none"
                type="square"
                border="1px solid #837e78"
                hoverBorder="1px solid #212121"
            />
            <SocialButton
                icon="fa-brands fa-dribbble"
                color="#837e78"
                hoverColor="#212121"
                bgColor="none"
                type="square"
                border="1px solid #837e78"
                hoverBorder="1px solid #212121"
            />
            <SocialButton
                icon="fa-brands fa-github"
                color="#837e78"
                hoverColor="#212121"
                bgColor="none"
                type="square"
                border="1px solid #837e78"
                hoverBorder="1px solid #212121"
            />
            <SocialButton
                icon="fa-brands fa-pied-piper"
                color="#837e78"
                hoverColor="#212121"
                bgColor="none"
                type="square"
                border="1px solid #837e78"
                hoverBorder="1px solid #212121"
            />
        </>
    );
}

export default MyComponent;

Effect A configurable social button component with animated effects and customizable

properties for enhanced user engagement. Social Button Preview

Preview

Result

Code

Social Buttons with Effect

import SocialButton from "@/components/SocialButton/SocialButton";

function MyComponent() {
    return (
        <>
            <SocialButton
                icon="fa-brands fa-facebook-f"
                color="#fff"
                effect="aeneas"
                bgColor="#3b5998"
                type="square-rounded"
            />
            <SocialButton
                icon="fa-brands fa-twitter"
                color="#fff"
                effect="jaques"
                bgColor="#00aced"
                type="square-rounded"
            />
            <SocialButton
                icon="fa-brands fa-google-plus-g"
                color="#fff"
                effect="egeon"
                bgColor="#dd4b39"
                type="square-rounded"
            />
            <SocialButton
                icon="fa-brands fa-dribbble"
                color="#fff"
                effect="claudio"
                bgColor="#ea4c89"
                type="square-rounded"
            />
            <SocialButton
                icon="fa-brands fa-vimeo-v"
                color="#fff"
                effect="laertes"
                bgColor="#1ab7ea"
                type="square-rounded"
            />
            <SocialButton
                icon="fa-brands fa-pinterest-p"
                color="#fff"
                effect="jinae"
                bgColor="#cb2027"
                type="square-rounded"
            />
        </>
    );
}

export default MyComponent;

Props

Name	Type	Default	Description
href	string	#	A string that specifies the URL of the social media platform or the website. You can use any valid URL as the value of href. The default value is #.
icon	string	fa-brands fa-facebook-f	A string that specifies the icon of the social media platform or the website. You can use any icon from the Font Awesome icons library. The default value is fa-brands fa-facebook-f.
bgColor	string	#3b5998	A string that specifies the background color of the icon. You can use any valid CSS color value as the value of bgColor. The default value is #3b5998.
hoverBgColor	string		A string that specifies the background color of the icon when the mouse hovers over it. You can use any valid CSS color value as the value of hoverBgColor.
color	string	#fff	A string that specifies the color of the icon. You can use any valid CSS color value as the value of color. The default value is #fff.
hoverColor	string		A string that specifies the color of the icon when the mouse hovers over it. You can use any valid CSS color value as the value of hoverColor.
effect	aeneas, jaques, egeon, claudio, laertes, jinae, bolb		A string that specifies the effect of the icon. You can choose from seven options: aeneas, jaques, egeon, claudio, laertes, jinae, or bolb.
type	rounded, square-rounded, square	square-rounded	A string that specifies the shape of the icon. You can choose from three options: rounded, square-rounded, or square. The default value is square-rounded.
border	string		A string that specifies the border of the icon. You can use any valid CSS border value as the value of border 1px solid #dddddd.
hoverBorder	string		A string that specifies the border of the icon when the mouse hovers over it. You can use any valid CSS border value as the value of hoverBorder.