Rate this docs

React Bootstrap Social buttons

React Social buttons - Bootstrap 4 & Material Design

Bootstrap social buttons are buttons which are dedicated for social media usage. Font Awesome covers icons for all major platforms.

Hard to imagine a good website or app without integration with Social Media.

With MDB it's child's play. We provide you buttons for the most popular social networks.

They work the same way as regular buttons. If you need more information about regular buttons, be sure to read our Buttons Documentation.


Various sizes of buttons and icons

22 22 22 22





22 22 22 22




          import React from 'react';
          import { MDBIcon, MDBContainer, MDBBtn } from 'mdbreact';
          
          const SocialButtonsPage = () => {
            return (
              <MDBContainer>
          
                <span className="counter">22</span>
                <MDBBtn social="so" size="lg">
                  <MDBIcon icon="stack-overflow" className="pr-1" /> Stack Overflow
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="so">
                  <MDBIcon icon="stack-overflow" className="pr-1" /> Stack Overflow
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="so" size="sm">
                  <MDBIcon icon="stack-overflow" className="pr-1" /> Stack Overflow
                </MDBBtn>
                <span className="counter">22</span>
          
                <MDBBtn social="fb" size="lg">
                  <MDBIcon icon="facebook" className="pr-1" />Facebook
                </MDBBtn>
                <MDBBtn social="fb">
                  <MDBIcon icon="facebook" className="pr-1" />Facebook
                </MDBBtn>
                <MDBBtn social="fb" size="sm">
                  <MDBIcon icon="facebook" className="pr-1" />Facebook
                </MDBBtn>
          
                <MDBBtn social="dribbble">
                  <MDBIcon icon="dribbble" className="pr-1" />
                </MDBBtn>
                <MDBBtn social="dribbble">
                  <MDBIcon icon="dribbble" className="pr-1" />
                </MDBBtn>
                <MDBBtn social="dribbble" size="sm">
                  <MDBIcon icon="dribbble" className="pr-1" />
                </MDBBtn>
          
                <MDBBtn social="slack">
                  <MDBIcon icon="slack" className="pr-1" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="slack">
                  <MDBIcon icon="slack" className="pr-1" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="slack" size="sm">
                  <MDBIcon icon="slack" className="pr-1" />
                </MDBBtn>
                <span className="counter">22</span>
          
                <MDBBtn floating social="tw" size="lg">
                  <MDBIcon icon="twitter" className="pr-1" />
                </MDBBtn>
                <MDBBtn floating social="tw">
                  <MDBIcon icon="twitter" className="pr-1" />
                </MDBBtn>
                <MDBBtn floating social="tw" size="sm">
                  <MDBIcon icon="twitter" className="pr-1" />
                </MDBBtn>
          
                <a href="#!" className="reddit-ic mr-3">
                  <MDBIcon icon="reddit-alien" size="5x" />
                </a>
                <a href="#!" className="reddit-ic mr-3">
                  <MDBIcon icon="reddit-alien" size="4x" />
                </a>
                <a href="#!" className="reddit-ic mr-3">
                  <MDBIcon icon="reddit-alien" size="3x" />
                </a>
                <a href="#!" className="reddit-ic mr-3">
                  <MDBIcon icon="reddit-alien" size="2x" />
                </a>
                <a href="#!" className="reddit-ic mr-3">
                  <MDBIcon icon="reddit-alien" />
                </a>
          
              </MDBContainer>
            );
          }
          
          export default SocialButtonsPage;
      

Full name social buttons MDB Pro component


          import React from 'react';
          import { MDBIcon, MDBContainer, MDBBtn } from 'mdbreact';
          
          const SocialButtonsPage = () => {
            return (
              <MDBContainer>
                <MDBBtn social="fb">
                    <MDBIcon icon="facebook" className="pr-1" /> Facebook
                  </MDBBtn>
                  <MDBBtn social="tw">
                    <MDBIcon icon="twitter" className="pr-1" /> Twitter
                  </MDBBtn>
                  <MDBBtn social="gplus">
                    <MDBIcon icon="google-plus" className="pr-1" /> Google +
                  </MDBBtn>
                  <MDBBtn social="li">
                    <MDBIcon icon="linkedin" className="pr-1" /> Linkedin
                  </MDBBtn>
                  <MDBBtn social="ins">
                    <MDBIcon icon="instagram" className="pr-1" /> Instagram
                  </MDBBtn>
                  <MDBBtn social="pin">
                    <MDBIcon icon="pinterest" className="pr-1" /> Pinterest
                  </MDBBtn>
                  <MDBBtn social="yt">
                    <MDBIcon icon="youtube" className="pr-1" /> Youtube
                  </MDBBtn>
                  <MDBBtn social="vk">
                    <MDBIcon icon="vk" className="pr-1" /> Vkontakte
                  </MDBBtn>
                  <MDBBtn social="so">
                    <MDBIcon icon="stack-overflow" className="pr-1" /> Stack Overflow
                  </MDBBtn>
                  <MDBBtn social="slack">
                    <MDBIcon icon="slack" className="pr-1" /> Slack
                  </MDBBtn>
                  <MDBBtn social="git">
                    <MDBIcon icon="github" className="pr-1" /> Github
                  </MDBBtn>
                  <MDBBtn social="comm">
                    <MDBIcon icon="comments" className="pr-1" /> Comments
                  </MDBBtn>
                  <MDBBtn social="email">
                    <MDBIcon icon="envelope" className="pr-1" /> Email
                  </MDBBtn>
                  <MDBBtn social="dribbble">
                    <MDBIcon icon="dribbble" className="pr-1" /> Dribbble
                  </MDBBtn>
              </MDBContainer>
            );
          }
          
          export default SocialButtonsPage;     
      

Simple social buttons MDB Pro component


          import React from 'react';
          import { MDBIcon, MDBContainer, MDBBtn } from 'mdbreact';
          
          const SocialButtonsPage = () => {
            return (
              <MDBContainer>
                <MDBBtn size="lg" social="fb">
                  <MDBIcon icon="facebook" />
                </MDBBtn>
                <MDBBtn size="lg" social="tw">
                  <MDBIcon icon="twitter" />
                </MDBBtn>
                <MDBBtn size="lg" social="gplus">
                  <MDBIcon icon="google-plus" />
                </MDBBtn>
                <MDBBtn size="lg" social="li">
                  <MDBIcon icon="linkedin" />
                </MDBBtn>
                <MDBBtn size="lg" social="ins">
                  <MDBIcon icon="instagram" />
                </MDBBtn>
                <MDBBtn size="lg" social="pin">
                  <MDBIcon icon="pinterest" />
                </MDBBtn>
                <MDBBtn size="lg" social="yt">
                  <MDBIcon icon="youtube" />
                </MDBBtn>
                <MDBBtn size="lg" social="vk">
                  <MDBIcon icon="vk" />
                </MDBBtn>
                <MDBBtn size="lg" social="so">
                  <MDBIcon icon="stack-overflow" />
                </MDBBtn>
                <MDBBtn size="lg" social="slack">
                  <MDBIcon icon="slack" />
                </MDBBtn>
                <MDBBtn size="lg" social="git">
                  <MDBIcon icon="github" />
                </MDBBtn>
                <MDBBtn size="lg" social="comm">
                  <MDBIcon icon="comments" />
                </MDBBtn>
                <MDBBtn size="lg" social="email">
                  <MDBIcon icon="envelope" />
                </MDBBtn>
                <MDBBtn size="lg" social="dribbble">
                  <MDBIcon icon="dribbble" />
                </MDBBtn>
              </MDBContainer>
            );
          }
          
          export default SocialButtonsPage;     
      

Floating social buttons MDB Pro component


          import React from 'react';
          import { MDBIcon, MDBContainer, MDBBtn } from 'mdbreact';
          
          const SocialButtonsPage = () => {
            return (
              <MDBContainer>
                <MDBBtn size="lg" tag="a" floating social="fb">
                  <MDBIcon icon="facebook" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="tw">
                  <MDBIcon icon="twitter" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="gplus">
                  <MDBIcon icon="google-plus" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="li">
                  <MDBIcon icon="linkedin" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="ins">
                  <MDBIcon icon="instagram" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="pin">
                  <MDBIcon icon="pinterest" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="yt">
                  <MDBIcon icon="youtube" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="vk">
                  <MDBIcon icon="vk" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="so">
                  <MDBIcon icon="stack-overflow" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="slack">
                  <MDBIcon icon="slack" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="git">
                  <MDBIcon icon="github" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="comm">
                  <MDBIcon icon="comments" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="email">
                  <MDBIcon icon="envelope" />
                </MDBBtn>
                <MDBBtn size="lg" tag="a" floating social="dribbble">
                  <MDBIcon icon="dribbble" />
                </MDBBtn>
              </MDBContainer>
            );
          }
          
          export default SocialButtonsPage;
      

Full name social counters MDB Pro component

22 22 22 22 22 22 22 22 22 22 22 22 22 22 22

          import React from 'react';
          import { MDBIcon, MDBContainer, MDBBtn } from 'mdbreact';
          
          const SocialButtonsPage = () => {
            return (
              <MDBContainer>
                <MDBBtn social="fb">
                  <MDBIcon icon="facebook" className="pr-1" /> Facebook
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="tw">
                  <MDBIcon icon="twitter" className="pr-1" /> Twitter
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="gplus">
                  <MDBIcon icon="google-plus" className="pr-1" /> Google +
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="li">
                  <MDBIcon icon="linkedin" className="pr-1" /> Linkedin
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="ins">
                  <MDBIcon icon="instagram" className="pr-1" /> Instagram
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="pin">
                  <MDBIcon icon="pinterest" className="pr-1" /> Pinterest
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="yt">
                  <MDBIcon icon="youtube" className="pr-1" /> Youtube
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="vk">
                  <MDBIcon icon="vk" className="pr-1" /> Vkontakte
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="so">
                  <MDBIcon icon="stack-overflow" className="pr-1" /> Stack Overflow
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="slack">
                  <MDBIcon icon="slack" className="pr-1" /> Slack
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="git">
                  <MDBIcon icon="github" className="pr-1" /> Github
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="comm">
                  <MDBIcon icon="comments" className="pr-1" /> Comments
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="email">
                  <MDBIcon icon="envelope" className="pr-1" /> Email
                  </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn social="dribbble">
                  <MDBIcon icon="dribbble" className="pr-1" /> Dribbble
                  </MDBBtn>
              </MDBContainer>
            );
          }
          
          export default SocialButtonsPage;
          
      

Simple social counters MDB Pro component

22 22 22 22 22 22 22 22 22 22 22 22 22 22 22

          import React from 'react';
          import { MDBIcon, MDBContainer, MDBBtn } from 'mdbreact';
          
          const SocialButtonsPage = () => {
            return (
              <MDBContainer>
                <MDBBtn size="lg" social="fb">
                  <MDBIcon icon="facebook" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="tw">
                  <MDBIcon icon="twitter" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="gplus">
                  <MDBIcon icon="google-plus" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="li">
                  <MDBIcon icon="linkedin" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="ins">
                  <MDBIcon icon="instagram" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="pin">
                  <MDBIcon icon="pinterest" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="yt">
                  <MDBIcon icon="youtube" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="vk">
                  <MDBIcon icon="vk" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="so">
                  <MDBIcon icon="stack-overflow" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="slack">
                  <MDBIcon icon="slack" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="git">
                  <MDBIcon icon="github" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="comm">
                  <MDBIcon icon="comments" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="email">
                  <MDBIcon icon="envelope" />
                </MDBBtn>
                <span className="counter">22</span>
                <MDBBtn size="lg" social="dribbble">
                  <MDBIcon icon="dribbble" />
                </MDBBtn>
                <span className="counter">22</span>
              </MDBContainer>
            );
          }
          
          export default SocialButtonsPage;        
      

Social icons MDB Pro component


          import React from 'react';
          import { MDBIcon, MDBContainer } from 'mdbreact';
          
          const SocialButtonsPage = () => {
            return (
              <MDBContainer>
                <a href="#!" className="fb-ic mr-3">
                  <MDBIcon icon="facebook" />
                </a>
                <a href="#!" className="tw-ic mr-3">
                  <MDBIcon icon="twitter" />
                </a>
                <a href="#!" className="gplus-ic mr-3">
                  <MDBIcon icon="google-plus" />
                </a>
                <a href="#!" className="li-ic mr-3">
                  <MDBIcon icon="linkedin" />
                </a>
                <a href="#!" className="ins-ic mr-3">
                  <MDBIcon icon="instagram" />
                </a>
                <a href="#!" className="pin-ic mr-3">
                  <MDBIcon icon="pinterest" />
                </a>
                <a href="#!" className="yt-ic mr-3">
                  <MDBIcon icon="youtube" />
                </a>
                <a href="#!" className="vk-ic mr-3">
                  <MDBIcon icon="vk" />
                </a>
                <a href="#!" className="so-ic mr-3">
                  <MDBIcon icon="stack-overflow" />
                </a>
                <a href="#!" className="slack-ic mr-3">
                  <MDBIcon icon="slack" />
                </a>
                <a href="#!" className="git-ic mr-3">
                  <MDBIcon icon="github" />
                </a>
                <a href="#!" className="comm-ic mr-3">
                  <MDBIcon icon="comments" />
                </a>
                <a href="#!" className="email-ic mr-3">
                  <MDBIcon icon="envelope-o" />
                </a>
                <a href="#!" className="dribbble-ic mr-3">
                  <MDBIcon icon="dribbble" />
                </a>
              </MDBContainer>
            );
          }
          
          export default SocialButtonsPage;        
      

React Social Buttons - API

In this section you will find advanced information about the Social Buttons component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement

Social buttons are combined Buttons and Icons components, so remember to import proper modules.


        import { MDBBtn, MDBIcon } from "mdbreact";
      

API Reference: Button Properties

The table below shows the configuration options of the MDBBtn component.

Name Type Default Description Example
action Boolean false Adds btn-action class, works with Cards <MDBBtn active >
active Boolean false Adds active class <MDBBtn active >
block Boolean false Create block level buttons <MDBBtn block >
circle Boolean false Adds btn-circle class, works with stepper <MDBBtn circle >
className String Adds custom classes <MDBBtn className="customClass" >
color String default Determines button color, accepts MDB predefined color classes <MDBBtn color="primary" >
disabled Boolean false Disables button from being clicked <MDBBtn disabled >
download String Adds download attribute with provided url <MDBBtn download="https://link_to_your_file.com" >
flat Boolean false Adds flat effect to button - button without backgorund and borders <MDBBtn flat >
floating Boolean false Adds floating effect to button <MDBBtn floating >
gradient String Adds gradient background to button, accepts MDB predefined gradients <MDBBtn gradient="peach" >
href String Adds href attribute with provided url and converts <button> tag into <a> tag <MDBBtn gradient="peach" >
innerRef Object Allows to pass Ref object, which will attach to rendered button or a DOM element <MDBBtn innerRef={this.buttonRef} >
outline Boolean false Renders button with outline, color property determines outline color <MDBBtn outline >
role String button Adds role attribute to button <MDBBtn role="..." >
rounded Boolean false Adds rounded corners effect to button <MDBBtn rounded >
size String medium Determines button size, available values: [sm, lg], medium by default <MDBBtn size="lg" >
social String Sets background color <MDBBtn social="fb" >
tag String button Changes default tag <MDBBtn tag="a" >
target String _self If used as link, sets target attribute <MDBBtn href="..." target="_blank" >
type String button Adds type attribute to button <MDBBtn type="submit" >

API Reference: Icon Properties

The table below shows the configuration options of the MDBIcon component.

Name Type Default Description Example
border Boolean false Adds border around icon <MDBIcon border >
className String Adds custom classes <MDBIcon className="customClass" >
fixed Boolean false Sets fixed with of icons (f.e. inside list) <MDBIcon fixed >
flip String Flips icon; acceptable props: horizontal or vertical <MDBIcon flip="horizontal" >
icon String Required! The Fontawesome icon name, which you want to use Icons list <MDBIcon icon="chevron" >
inverse Boolean false Sets alternative icon color <MDBIcon inverse >
list Boolean false Use inside list with class fa-ul to replace bullets with icons <MDBListGroup className="fa-list"> <MDBIcon list /> </MDBListGroup>
pull String Pulls icon to the right or left <MDBIcon pull="right" >
pulse Boolean false Rotates icon in 8 steps <MDBIcon pulse >
rotate String Rotates icon by 90, 180 or 270 degrees <MDBIcon rotate="270" >
size String Increse icon size; accepts parameters: [lg, 2x, 3x, 4x, 5x] <MDBIcon size="3x" >
spin Boolean false Spins the icon, you can combine this prop with pulse <MDBIcon spin >
stack String Use class fa-stack on wrapper to stack multiple icons; use 1x for regulary sized icon and 2x for larger one <span className="fa-stack"> <MDBIcon icon="square-o" stack="2x" /> <MDBIcon icon="twitter" stack="1x" /> </span>