Vue Bootstrap Social Buttons

Vue Social Buttons - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue 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 



        
            
        <template>
          <div>
            <mdb-btn class="btn-so" icon="stack-overflow" fab size="lg">Stack overflow</mdb-btn>
            <span class="counter">22</span>
            <mdb-btn class="btn-so" icon="stack-overflow" fab>Stack overflow</mdb-btn>
            <span class="counter">22</span>
            <mdb-btn class="btn-so" icon="stack-overflow" fab size="md">Stack overflow</mdb-btn>
            <span class="counter">22</span>
            <mdb-btn class="btn-so" icon="stack-overflow" fab size="sm">Stack overflow</mdb-btn>
            <span class="counter">22</span>
            <br><br>
            <mdb-btn class="btn-fb" icon="facebook-f" fab size="lg">Facebook</mdb-btn>
            <mdb-btn class="btn-fb" icon="facebook-f" fab>Facebook</mdb-btn>
            <mdb-btn class="btn-fb" icon="facebook-f" fab size="md">Facebook</mdb-btn>
            <mdb-btn class="btn-fb" icon="facebook-f" fab size="sm">Facebook</mdb-btn>
            <br><br>
            <mdb-btn class="btn-dribbble" icon="dribbble" fab size="lg" />
            <mdb-btn class="btn-dribbble" icon="dribbble" fab />
            <mdb-btn class="btn-dribbble" icon="dribbble" fab size="md" />
            <mdb-btn class="btn-dribbble" icon="dribbble" fab size="sm" />
            <br><br>
            <mdb-btn class="btn-slack" icon="slack-hash" fab size="lg" />
            <span class="counter">22</span>
            <mdb-btn class="btn-slack" icon="slack-hash" fab />
            <span class="counter">22</span>
            <mdb-btn class="btn-slack" icon="slack-hash" fab size="md" />
            <span class="counter">22</span>
            <mdb-btn class="btn-slack" icon="slack-hash" fab size="sm" />
            <span class="counter">22</span>
            <br><br>
            <mdb-btn tag="a" floating class="btn-tw" icon="twitter" fab size="lg" />
            <mdb-btn tag="a" floating class="btn-tw" icon="twitter" fab />
            <mdb-btn tag="a" floating class="btn-tw" icon="twitter" fab size="md" />
            <mdb-btn tag="a" floating class="btn-tw" icon="twitter" fab size="sm" />
            <br><br>
            <a class="reddit-ic" role="button"><mdb-icon icon="reddit-alien" fab size="5x" class="pr-3" /></a>
            <a class="reddit-ic" role="button"><mdb-icon icon="reddit-alien" fab size="4x" class="pr-3" /></a>
            <a class="reddit-ic" role="button"><mdb-icon icon="reddit-alien" fab size="3x" class="pr-3" /></a>
            <a class="reddit-ic" role="button"><mdb-icon icon="reddit-alien" fab size="2x" class="pr-3" /></a>
            <a class="reddit-ic" role="button"><mdb-icon icon="reddit-alien" fab size="lg" class="pr-3" /></a>
            <a class="reddit-ic" role="button"><mdb-icon icon="reddit-alien" fab /></a>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbBtn, mdbIcon} from 'mdbvue';
          export default {
            name: 'ButtonsSocial',
            components: {
              mdbBtn,
              mdbIcon
            }
          }
        </script>

Full name social buttons MDB Pro component

Use button with social media icon to indicate an action or link within your website. 

        
            
        <template>
          <div>
            <mdb-btn class="btn-fb" icon="facebook-f" fab>Facebook</mdb-btn>
            <mdb-btn class="btn-tw" icon="twitter" fab>Twitter</mdb-btn>
            <mdb-btn class="btn-gplus" icon="google-plus-g" fab>Google +</mdb-btn>
            <mdb-btn class="btn-li" icon="linkedin-in" fab>Linkedin</mdb-btn>
            <mdb-btn class="btn-ins" icon="instagram" fab>Instagram</mdb-btn>
            <mdb-btn class="btn-pin" icon="pinterest" fab>Pinterest</mdb-btn>
            <mdb-btn class="btn-vk" icon="vk" fab>Vkontakte</mdb-btn>
            <mdb-btn class="btn-so" icon="stack-overflow" fab>Stack Overflow</mdb-btn>
            <mdb-btn class="btn-yt" icon="youtube" fab>Youtube</mdb-btn>
            <mdb-btn class="btn-slack" icon="slack-hash" fab>Slack</mdb-btn>
            <mdb-btn class="btn-git" icon="github" fab>Github</mdb-btn>
            <mdb-btn class="btn-comm" icon="comments">Comments</mdb-btn>
            <mdb-btn class="btn-email" icon="envelope">Email</mdb-btn>
            <mdb-btn class="btn-dribbble" icon="dribbble" fab>Dribbble</mdb-btn>
            <mdb-btn class="btn-reddit" icon="reddit-alien" fab>Reddit</mdb-btn>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbBtn } from 'mdbvue';
          export default {
            name: 'ButtonsSocial',
            components: {
              mdbBtn
            }
          }
        </script>

Simple social buttons MDB Pro component

Use these button styles when building social media login forms using Facebook, Twitter, GitHub, Google, and Apple. 

        
            
        <template>
          <div>
            <mdb-btn class="btn-fb" icon="facebook-f" fab></mdb-btn>
            <mdb-btn class="btn-tw" icon="twitter" fab></mdb-btn>
            <mdb-btn class="btn-gplus" icon="google-plus-g" fab></mdb-btn>
            <mdb-btn class="btn-li" icon="linkedin-in" fab></mdb-btn>
            <mdb-btn class="btn-ins" icon="instagram" fab></mdb-btn>
            <mdb-btn class="btn-pin" icon="pinterest" fab></mdb-btn>
            <mdb-btn class="btn-vk" icon="vk" fab></mdb-btn>
            <mdb-btn class="btn-so" icon="stack-overflow" fab></mdb-btn>
            <mdb-btn class="btn-yt" icon="youtube" fab></mdb-btn>
            <mdb-btn class="btn-slack" icon="slack-hash" fab></mdb-btn>
            <mdb-btn class="btn-git" icon="github" fab></mdb-btn>
            <mdb-btn class="btn-comm" icon="comments"></mdb-btn>
            <mdb-btn class="btn-email" icon="envelope"></mdb-btn>
            <mdb-btn class="btn-dribbble" icon="dribbble" fab></mdb-btn>
            <mdb-btn class="btn-reddit" icon="reddit-alien" fab></mdb-btn>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbBtn } from 'mdbvue';
          export default {
            name: 'ButtonsSocial',
            components: {
              mdbBtn
            }
          }
        </script>

Floating social buttons MDB Pro component

By adding .btn-floating class you can create a floating social button.

        
            
        <template>
          <div>
            <mdb-btn tag="a" size="lg" floating class="btn-fb" icon="facebook-f" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-tw" icon="twitter" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-gplus" icon="google-plus-g" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-li" icon="linkedin-in" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-ins" icon="instagram" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-pin" icon="pinterest" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-vk" icon="vk" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-so" icon="stack-overflow" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-yt" icon="youtube" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-slack" icon="slack-hash" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-git" icon="github" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-comm" icon="comments"></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-email" icon="envelope"></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-dribbble" icon="dribbble" fab></mdb-btn>
            <mdb-btn tag="a" size="lg" floating class="btn-reddit" icon="reddit-alien" fab></mdb-btn>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbBtn } from 'mdbvue';
          export default {
            name: 'ButtonsSocial',
            components: {
              mdbBtn
            }
          }
        </script>

Full name social counters MDB Pro component

22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 
        
            
        <template>
          <div>
            <mdb-btn class="btn-fb" icon="facebook-f" fab>Facebook</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-tw" icon="twitter" fab>Twitter</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-gplus" icon="google-plus-g" fab>Google +</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-li" icon="linkedin-in" fab>Linkedin</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-ins" icon="instagram" fab>Instagram</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-pin" icon="pinterest" fab>Pinterest</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-vk" icon="vk" fab>Vkontakte</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-so" icon="stack-overflow" fab>Stack Overflow</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-yt" icon="youtube" fab>Youtube</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-slack" icon="slack-hash" fab>Slack</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-git" icon="github" fab>Github</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-comm" icon="comments">Comments</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-email" icon="envelope">Email</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-dribbble" icon="dribbble" fab>Dribbble</mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-reddit" icon="reddit-alien" fab>Reddit</mdb-btn><span class="counter">22</span>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbBtn } from 'mdbvue';
          export default {
            name: 'ButtonsSocial',
            components: {
              mdbBtn
            }
          }
        </script>

Simple social counters MDB Pro component

22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 
        
            
        <template>
          <div>
            <mdb-btn class="btn-fb" icon="facebook-f" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-tw" icon="twitter" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-gplus" icon="google-plus-g" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-li" icon="linkedin-in" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-ins" icon="instagram" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-pin" icon="pinterest" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-vk" icon="vk" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-so" icon="stack-overflow" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-yt" icon="youtube" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-slack" icon="slack-hash" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-git" icon="github" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-comm" icon="comments"></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-email" icon="envelope"></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-dribbble" icon="dribbble" fab></mdb-btn><span class="counter">22</span>
            <mdb-btn class="btn-reddit" icon="reddit-alien" fab></mdb-btn><span class="counter">22</span>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbBtn } from 'mdbvue';
          export default {
            name: 'ButtonsSocial',
            components: {
              mdbBtn
            }
          }
        </script>

Social icons MDB Pro component 

        
            
        <template>
          <div>
            <a class="fb-ic mr-3" role="button"><mdb-icon fab icon="facebook-f" size="lg" /></a>
            <a class="tw-ic mr-3" role="button"><mdb-icon fab icon="twitter" size="lg" /></a>
            <a class="gplus-ic mr-3" role="button"><mdb-icon fab icon="google-plus-g" size="lg" /></a>
            <a class="li-ic mr-3" role="button"><mdb-icon fab icon="linkedin-in" size="lg" /></a>
            <a class="ins-ic mr-3" role="button"><mdb-icon fab icon="instagram" size="lg" /></a>
            <a class="pin-ic mr-3" role="button"><mdb-icon fab icon="pinterest" size="lg" /></a>
            <a class="vk-ic mr-3" role="button"><mdb-icon fab icon="vk" size="lg" /></a>
            <a class="so-ic mr-3" role="button"><mdb-icon fab icon="stack-overflow" size="lg" /></a>
            <a class="yt-ic mr-3" role="button"><mdb-icon fab icon="youtube" size="lg" /></a>
            <a class="slack-ic mr-3" role="button"><mdb-icon fab icon="slack-hash" size="lg" /></a>
            <a class="git-ic mr-3" role="button"><mdb-icon fab icon="github" size="lg" /></a>
            <a class="comm-ic mr-3" role="button"><mdb-icon icon="comments" size="lg" /></a>
            <a class="email-ic mr-3" role="button"><mdb-icon icon="envelope" size="lg" /></a>
            <a class="dribbble-ic mr-3" role="button"><mdb-icon fab icon="dribbble" size="lg" /></a>
            <a class="reddit-ic mr-3" role="button"><mdb-icon fab icon="reddit-alien" size="lg" /></a>
          </div>
        </template>
      
        
    
        
            
        <script>
          import { mdbIcon } from 'mdbvue';
          export default {
            name: 'ButtonsSocial',
            components: {
              mdbIcon
            }
          }
        </script>

Vue Social Buttons - API

In this section you will find advanced information about the Social Button 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

        
            
      <script>
        import { mdbBtn } from 'mdbvue';
      </script>

API Reference: Properties

Name Type Default Description Example
tag String 'button' Changes button tag <mdb-btn tag="a">
color String 'default' Determines button color <mdb-btn color="primary">
outline String Changes button outline color <mdb-btn outline="primary">
size String Determines button size <mdb-btn size="lg">
block Boolean false Create block level buttons <mdb-btn block>
role String Adds role attribute to button <mdb-btn role="...">
type String Adds type attribute to button <mdb-btn type="...">
active Boolean false Adds active class <mdb-btn active>
disabled Boolean false Adds disabled class <mdb-btn disabled>
icon String Adds icon inside button <mdb-btn icon="user">
iconLeft Boolean false Determines the position of icon <mdb-btn iconLeft>
iconRight Boolean false Determines the position of icon <mdb-btn iconRight>
wavesDark Boolean false Chagnes waves shadow to dark (useful for white or transparent buttons) <mdb-btn wavesDark>
gradient String Adds gradient effect to button <mdb-btn gradient="peach">
rounded Boolean false Adds rounded effect to button <mdb-btn rounded>
floating Boolean false Adds floating effect to button <mdb-btn floating>
flat Boolean false Adds flat effect to button <mdb-btn flat>
transparent Boolean false Makes button transparent <mdb-btn transparent>
save Boolean false Usuful for save button inside select <mdb-btn save>
iconClass String Changes icon's element class inside button <mdb-btn iconClass="..." >
iconColor String Changes icon's element color <mdb-btn iconColor="..." >