React Bootstrap Social buttons
React 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
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 MDB Pro component
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 fab icon="stack-overflow" className="pr-1" /> Stack Overflow
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="so">
<MDBIcon fab icon="stack-overflow" className="pr-1" /> Stack Overflow
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="so" size="sm">
<MDBIcon fab icon="stack-overflow" className="pr-1" /> Stack Overflow
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="fb" size="lg">
<MDBIcon fab icon="facebook-f" className="pr-1" />Facebook
</MDBBtn>
<MDBBtn social="fb">
<MDBIcon fab icon="facebook-f" className="pr-1" />Facebook
</MDBBtn>
<MDBBtn social="fb" size="sm">
<MDBIcon fab icon="facebook-f" 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 fab icon="slack" className="pr-1" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="slack">
<MDBIcon fab icon="slack" className="pr-1" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="slack" size="sm">
<MDBIcon fab icon="slack" className="pr-1" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn floating social="tw" size="lg">
<MDBIcon fab icon="twitter" className="pr-1" />
</MDBBtn>
<MDBBtn floating social="tw">
<MDBIcon fab icon="twitter" className="pr-1" />
</MDBBtn>
<MDBBtn floating social="tw" size="sm">
<MDBIcon fab icon="twitter" className="pr-1" />
</MDBBtn>
<a href="#!" className="reddit-ic mr-3">
<MDBIcon fab icon="reddit-alien" size="5x" />
</a>
<a href="#!" className="reddit-ic mr-3">
<MDBIcon fab icon="reddit-alien" size="4x" />
</a>
<a href="#!" className="reddit-ic mr-3">
<MDBIcon fab icon="reddit-alien" size="3x" />
</a>
<a href="#!" className="reddit-ic mr-3">
<MDBIcon fab icon="reddit-alien" size="2x" />
</a>
<a href="#!" className="reddit-ic mr-3">
<MDBIcon fab 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 fab icon="facebook-f" className="pr-1" /> Facebook
</MDBBtn>
<MDBBtn social="tw">
<MDBIcon fab icon="twitter" className="pr-1" /> Twitter
</MDBBtn>
<MDBBtn social="gplus">
<MDBIcon fab icon="google-plus-g" className="pr-1" /> Google +
</MDBBtn>
<MDBBtn social="li">
<MDBIcon fab icon="linkedin-in" className="pr-1" /> Linkedin
</MDBBtn>
<MDBBtn social="ins">
<MDBIcon fab icon="instagram" className="pr-1" /> Instagram
</MDBBtn>
<MDBBtn social="pin">
<MDBIcon fab icon="pinterest" className="pr-1" /> Pinterest
</MDBBtn>
<MDBBtn social="yt">
<MDBIcon fab fab icon="youtube" className="pr-1" /> Youtube
</MDBBtn>
<MDBBtn social="vk">
<MDBIcon fab icon="vk" className="pr-1" /> Vkontakte
</MDBBtn>
<MDBBtn social="so">
<MDBIcon fab icon="stack-overflow" className="pr-1" /> Stack Overflow
</MDBBtn>
<MDBBtn social="slack">
<MDBIcon fab icon="slack" className="pr-1" /> Slack
</MDBBtn>
<MDBBtn social="git">
<MDBIcon fab 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;
Full name social counters MDB Pro component
import React from 'react';
import { MDBIcon, MDBContainer, MDBBtn } from 'mdbreact';
const SocialButtonsPage = () => {
return (
<MDBContainer>
<MDBBtn social="fb">
<MDBIcon fab icon="facebook-f" className="pr-1" /> Facebook
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="tw">
<MDBIcon fab icon="twitter" className="pr-1" /> Twitter
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="gplus">
<MDBIcon fab icon="google-plus-g" className="pr-1" /> Google +
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="li">
<MDBIcon fab icon="linkedin-in" className="pr-1" /> Linkedin
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="ins">
<MDBIcon fab icon="instagram" className="pr-1" /> Instagram
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="pin">
<MDBIcon fab icon="pinterest" className="pr-1" /> Pinterest
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="yt">
<MDBIcon fab icon="youtube" className="pr-1" /> Youtube
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="vk">
<MDBIcon fab icon="vk" className="pr-1" /> Vkontakte
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="so">
<MDBIcon fab icon="stack-overflow" className="pr-1" /> Stack Overflow
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="slack">
<MDBIcon fab icon="slack" className="pr-1" /> Slack
</MDBBtn>
<span className="counter">22</span>
<MDBBtn social="git">
<MDBIcon fab 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
import React from 'react';
import { MDBIcon, MDBContainer, MDBBtn } from 'mdbreact';
const SocialButtonsPage = () => {
return (
<MDBContainer>
<MDBBtn size="lg" social="fb">
<MDBIcon fab icon="facebook-f" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn size="lg" social="tw">
<MDBIcon fab icon="twitter" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn size="lg" social="gplus">
<MDBIcon fab icon="google-plus-g" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn size="lg" social="li">
<MDBIcon fab icon="linkedin-in" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn size="lg" social="ins">
<MDBIcon fab icon="instagram" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn size="lg" social="pin">
<MDBIcon fab icon="pinterest" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn size="lg" social="yt">
<MDBIcon fab icon="youtube" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn size="lg" social="vk">
<MDBIcon fab icon="vk" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn size="lg" social="so">
<MDBIcon fab icon="stack-overflow" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn size="lg" social="slack">
<MDBIcon fab icon="slack" />
</MDBBtn>
<span className="counter">22</span>
<MDBBtn size="lg" social="git">
<MDBIcon fab 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;
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 far icon="square" stack="2x" />
<MDBIcon fab icon="twitter" stack="1x" />
</span>
|
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 fab icon="facebook-f" /> </a> <a href="#!" className="tw-ic mr-3"> <MDBIcon fab icon="twitter" /> </a> <a href="#!" className="gplus-ic mr-3"> <MDBIcon fab icon="google-plus-g" /> </a> <a href="#!" className="li-ic mr-3"> <MDBIcon fab icon="linkedin-in" /> </a> <a href="#!" className="ins-ic mr-3"> <MDBIcon fab icon="instagram" /> </a> <a href="#!" className="pin-ic mr-3"> <MDBIcon fab icon="pinterest" /> </a> <a href="#!" className="yt-ic mr-3"> <MDBIcon fab icon="youtube" /> </a> <a href="#!" className="vk-ic mr-3"> <MDBIcon fab icon="vk" /> </a> <a href="#!" className="so-ic mr-3"> <MDBIcon fab icon="stack-overflow" /> </a> <a href="#!" className="slack-ic mr-3"> <MDBIcon fab icon="slack" /> </a> <a href="#!" className="git-ic mr-3"> <MDBIcon fab icon="github" /> </a> <a href="#!" className="comm-ic mr-3"> <MDBIcon icon="comments" /> </a> <a href="#!" className="email-ic mr-3"> <MDBIcon icon="envelope" /> </a> <a href="#!" className="dribbble-ic mr-3"> <MDBIcon fab icon="dribbble" /> </a> </MDBContainer> ); } export default SocialButtonsPage;