React Bootstrap Buttons

React 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

React Bootstrap buttons are components which are triggering a desirable user interaction. Easy to customize in terms of size, shape, and color.

Basic examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. 

        
            
        import React, { Fragment } from "react";
        import { MDBBtn } from "mdbreact";

        const ButtonPage = () => {
          return (
            <Fragment>
              <MDBBtn color="primary">Primary</MDBBtn>
              <MDBBtn>Default</MDBBtn>
              <MDBBtn color="secondary">Secondary</MDBBtn>
              <MDBBtn color="success">Success</MDBBtn>
              <MDBBtn color="info">Info</MDBBtn>
              <MDBBtn color="warning">Warning</MDBBtn>
              <MDBBtn color="danger">Danger</MDBBtn>
            </Fragment>
          );
        }

        export default ButtonPage;

Additional styles

MDBootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. 

        
            
        import React, { Fragment } from "react";
        import { MDBBtn } from "mdbreact";

        const ButtonPage = () => {
          return (
            <Fragment>
              <MDBBtn color="elegant">Elegant</MDBBtn>
              <MDBBtn color="unique">Unique</MDBBtn>
              <MDBBtn color="pink">Pink</MDBBtn>
              <MDBBtn color="purple">Purple</MDBBtn>
              <MDBBtn color="deep-purple">Deep-purple</MDBBtn>
              <MDBBtn color="indigo">Indigo</MDBBtn>
              <MDBBtn color="light-blue">Light blue</MDBBtn>
              <MDBBtn color="cyan">Cyan</MDBBtn>
              <MDBBtn color="dark-green">Dark-green</MDBBtn>
              <MDBBtn color="light-green">Light-green</MDBBtn>
              <MDBBtn color="yellow">Yellow</MDBBtn>
              <MDBBtn color="amber">Amber</MDBBtn>
              <MDBBtn color="deep-orange">Deep-orange</MDBBtn>
              <MDBBtn color="brown">Brown</MDBBtn>
              <MDBBtn color="blue-grey">Blue-grey</MDBBtn>
              <MDBBtn color="mdb-color">MDB</MDBBtn>
            </Fragment>
          );
        }

        export default ButtonPage;

Gradient buttons

Check our documentation about gradients. 

        
            
        import React, { Fragment } from "react";
        import { MDBBtn } from "mdbreact";

        const ButtonPage = () => {
          return (
            <Fragment>
              <MDBBtn gradient="peach">Peach</MDBBtn>
              <MDBBtn gradient="purple">Purple</MDBBtn>
              <MDBBtn gradient="blue">Blue</MDBBtn>
              <MDBBtn gradient="aqua">Aqua</MDBBtn>
            </Fragment>
          );
        }

        export default ButtonPage;

Outline buttons

In need of a button, but not the hefty background colors they bring? outline property removes all background images and colors on any button. 

        
            
        import React, { Fragment } from "react";
        import { MDBBtn } from "mdbreact";

        const ButtonPage = () => {
          return (
            <Fragment>
              <MDBBtn outline color="primary">Primary</MDBBtn>
              <MDBBtn outline>Default</MDBBtn>
              <MDBBtn outline color="secondary">Secondary</MDBBtn>
              <MDBBtn outline color="success">Success</MDBBtn>
              <MDBBtn outline color="info">Info</MDBBtn>
              <MDBBtn outline color="warning">Warning</MDBBtn>
              <MDBBtn outline color="danger">Danger</MDBBtn>
            </Fragment>
          );
        }

        export default ButtonPage;

Waves effect with outline buttons

MDB automatically adds waves effect to each element with .btn class. However, in outline buttons, it's barely visible due to lack of background.

That's why to outline buttons we add additional class .waves-effect to make waves darker and more intense.

Rounded buttons MDB Pro component 

        
            
        import React, { Fragment } from "react";
        import { MDBBtn } from "mdbreact";

        const ButtonPage = () => {
          return (
            <Fragment>
              <MDBBtn color="primary" rounded>Primary</MDBBtn>
              <MDBBtn rounded>Default</MDBBtn>
              <MDBBtn rounded color="secondary">Secondary</MDBBtn>
              <MDBBtn rounded color="success">Success</MDBBtn>
              <MDBBtn rounded color="info">Info</MDBBtn>
              <MDBBtn rounded color="warning">Warning</MDBBtn>
              <MDBBtn rounded color="danger">Danger</MDBBtn>
            </Fragment>
          );
        }

        export default ButtonPage;

Rounded outline buttons MDB Pro component 

        
            
        import React, { Fragment } from "react";
        import { MDBBtn } from "mdbreact";

        const ButtonPage = () => {
          return (
            <Fragment>
              <MDBBtn color="primary" outline rounded>Primary</MDBBtn>
              <MDBBtn rounded outline>Default</MDBBtn>
              <MDBBtn rounded outline color="secondary">Secondary</MDBBtn>
              <MDBBtn rounded outline color="success">Success</MDBBtn>
              <MDBBtn rounded outline color="info">Info</MDBBtn>
              <MDBBtn rounded outline color="warning">Warning</MDBBtn>
              <MDBBtn rounded outline color="danger">Danger</MDBBtn>
            </Fragment>
          );
        }

        export default ButtonPage;

Floating buttons MDB Pro component 

        
            
          import React, { Fragment } from "react";
          import { MDBBtn, MDBIcon } from "mdbreact";

          const ButtonPage = () => {
            return (
              <Fragment>
                <MDBBtn tag="a" size="lg" floating gradient="purple">
                  <MDBIcon icon="bolt" />
                </MDBBtn>
                <MDBBtn tag="a" floating gradient="peach">
                  <MDBIcon icon="leaf" />
                </MDBBtn>
                <MDBBtn tag="a" size="sm" floating gradient="blue">
                  <MDBIcon icon="star" />
                </MDBBtn>
              </Fragment>
            );
          }

          export default ButtonPage;

Fixed buttons MDB Pro component

See the live example of fixed button in the bottom right corner of this page.

        
            
        import React, { Component } from "react";
        import { MDBBtnFixed, MDBBtnFixedItem } from "mdbreact";

        class ButtonPage extends Component {

          state = {
            buttonStyle: {
              transform: "scaleY(0.4) scaleX(0.4) translateY(40px) translateX(0)",
              opacity: "0"
            }
          }


          onHover = () => {
            this.setState({
              buttonStyle: {
                transform: "scaleY(1) scaleX(1) translateY(0) translateX(0)",
                opacity: "1"
              }
            });
          }

          onMouseLeave = () => {
            this.setState({
              buttonStyle: {
                transform: "scaleY(0.4) scaleX(0.4) translateY(40px) translateX(0)",
                opacity: "0"
              }
            });
          }

          render() {
            return (
              <section style={{ height: "1000px" }}>
                <MDBBtnFixed
                  onMouseEnter={this.onHover}
                  onMouseLeave={this.onMouseLeave}
                  floating
                  size="lg"
                  color="red"
                  icon="pencil-alt"
                  style={{ bottom: "45px", right: "24px" }}
                >
                  <MDBBtnFixedItem
                    buttonStyle={this.state.buttonStyle}
                    color="red"
                    icon="star"
                  />
                  <MDBBtnFixedItem
                    buttonStyle={this.state.buttonStyle}
                    color="yellow"
                    icon="user"
                  />
                  <MDBBtnFixedItem
                    buttonStyle={this.state.buttonStyle}
                    color="green"
                    icon="envelope"
                  />
                  <MDBBtnFixedItem
                    buttonStyle={this.state.buttonStyle}
                    color="blue"
                    icon="shopping-cart"
                  />
                </MDBBtnFixed>
              </section>
            );
          }
        }

        export default ButtonPage;

Flat button MDB Pro component 

        
            
        import React from "react";
        import { MDBBtn } from "mdbreact";

        const ButtonPage = () => {
          return (
            <MDBBtn flat>Flat MDBBtn</MDBBtn>
          );
        }

        export default ButtonPage;

Buttons with icons

        
            
        import React, { Fragment } from "react";
        import { MDBBtn, MDBIcon } from "mdbreact";

        const ButtonPage = () => {
          return (
            <Fragment>
              <MDBBtn color="primary">
                <MDBIcon icon="magic" className="mr-1" /> Left
              </MDBBtn>
              <MDBBtn color="default">
                Right <MDBIcon icon="magic" className="ml-1" />
              </MDBBtn>
            </Fragment>
          );
        }

        export default ButtonPage;

Button tags

The <MDBBtn> component are designed to be used as a <button> element. However, you can also use it as <a> element (though some browsers may apply a slightly different rendering), just add tag="a" prop.

When using <MDBBtn> component as <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" prop to appropriately convey their purpose to assistive technologies such as screen readers.

Link SPAN 
        
            
          import React from "react";
          import { MDBBtn } from "mdbreact";

          const ButtonPage = () => {
            return (
              <>
                <MDBBtn tag="a" role="button" color="primary">LINK</MDBBtn>
                <MDBBtn tag="span" color="primary">SPAN</MDBBtn>
              </>
            );
          }

          export default ButtonPage;

Sizes

Fancy larger or smaller buttons? Add size property for additional sizes.

        
            
          import React, { Fragment } from "react";
          import { MDBBtn } from "mdbreact";

          const ButtonPage = () => {
            return (
              <Fragment>
                <MDBBtn color="primary" size="lg">Large button</MDBBtn>
                <MDBBtn color="mdb-color">Normal button</MDBBtn>
                <MDBBtn color="dark-green" size="sm">Small button</MDBBtn>
              </Fragment>
            );
          }

          export default ButtonPage;

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. You can force the same active appearance with active prop.

        
            
          import React, { Fragment } from "react";
          import { MDBBtn } from "mdbreact";

          const ButtonPage = () => {
            return (
              <Fragment>
                <MDBBtn active color="primary">Active Button</MDBBtn>
                <MDBBtn color="primary">Button</MDBBtn>
              </Fragment>
            );
          }

          export default ButtonPage;

Disabled state

Make buttons look inactive by adding the disabled boolean prop to any <MDBBtn> component.

        
            
          import React, { Fragment } from "react";
          import { MDBBtn } from "mdbreact";

          const ButtonPage = () => {
            return (
              <Fragment>
                <MDBBtn color="primary" disabled size="lg">Primary button</MDBBtn>
                <MDBBtn color="default" disabled size="lg">Default button</MDBBtn>
              </Fragment>
            );
          }

          export default ButtonPage;

React Buttons - API

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

        
            
          import { MDBBtn, MDBIcon, MDBBtnFixed, MDBBtnFixedItem } 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 action >
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 href="..." >
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: ButtonFixed Properties

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

Name Type Default Description Example
active Boolean false Adds active class <MDBBtnFixed active >
block Boolean false Create block level buttons <MDBBtnFixed block >
className String Adds custom classes <MDBBtnFixed className="customClass" >
color String default Determines button color, accepts MDB predefined color classes <MDBBtnFixed color="primary" >
disabled Boolean false Disables button from being clicked <MDBBtnFixed disabled >
flat Boolean false Adds flat effect to button - button without background and borders <MDBBtnFixed flat >
floating Boolean false Adds floating effect to button <MDBBtnFixed floating >
gradient String Adds gradient background to button, accepts MDB predefined gradients <MDBBtnFixed gradient="peach" >
icon String Adds font-awesome icon <MDBBtnFixed icon="caret-right" />
iconBrand Boolean false Use this property to set brand icon (fab) <MDBBtnFixed icon="twitter" iconBrand />
iconClassName String Adds custom classes to icon element <MDBBtnFixed icon="envelope" iconClassName="customClass" />
iconLight Boolean false Use this property to set light icon (fal) <MDBBtnFixed icon="twitter" iconLight />
iconRegular Boolean false Use this property to set regular icon (far) <MDBBtnFixed icon="twitter" iconRegular />
iconSize String Sets icon size <MDBBtnFixed icon="pencil-alt" size="5x" />
innerRef Object Allows to pass Ref object, which will attach to rendered button or a DOM element <MDBBtnFixed innerRef={this.buttonRef} >
outline Boolean false Renders button with outline, color property determines outline color <MDBBtnFixed outline >
role String button Adds role attribute to button <MDBBtnFixed role="..." >
rounded Boolean false Adds rounded corners effect to button <MDBBtnFixed rounded >
size String medium Determines button size, available values: [sm, lg], medium by default <MDBBtnFixed size="lg" >
topSection String # Sets url to your top section <MDBBtnFixed topSection="#introduction" >
type String button Adds type attribute to button <MDBBtnFixed type="submit" >

API Reference: ButtonFixedItem Properties

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

Name Type Default Description Example
active Boolean false Adds active class <MDBBtnFixedItem active >
block Boolean false Create block level buttons <MDBBtnFixedItem block >
buttonStyle String Adds custom styling (component requires that because it is nested into list) <MDBBtnFixedItem buttonStyle={{ border-color: "black" }} >
className String Adds custom classes <MDBBtnFixedItem className="customClass" >
color String default Determines button color, accepts MDB predefined color classes <MDBBtnFixedItem color="primary" >
disabled Boolean false Disables button from being clicked <MDBBtnFixedItem disabled >
flat Boolean false Adds flat effect to button - button without background and borders <MDBBtnFixedItem flat >
floating Boolean false Adds floating effect to button <MDBBtnFixedItem floating >
gradient String Adds gradient background to button, accepts MDB predefined gradients <MDBBtnFixedItem gradient="peach" >
icon String Adds font-awesome icon <MDBBtnFixedItem icon="caret-right" />
iconBrand Boolean false Use this property to set brand icon (fab) <MDBBtnFixedItem icon="twitter" iconBrand />
iconClassName String Adds custom classes to icon element <MDBBtnFixedItem icon="envelope" iconClassName="customClass" />
iconLight Boolean false Use this property to set light icon (fal) <MDBBtnFixedItem icon="twitter" iconLight />
iconRegular Boolean false Use this property to set regular icon (far) <MDBBtnFixedItem icon="twitter" iconRegular />
iconSize String Sets icon size <MDBBtnFixedItem icon="pencil-alt" size="5x" />
innerRef Object Allows to pass Ref object, which will attach to rendered button or a DOM element <MDBBtnFixedItem innerRef={this.buttonRef} >
outline Boolean false Renders button with outline, color property determines outline color <MDBBtnFixedItem outline >
role String button Adds role attribute to button <MDBBtnFixedItem role="..." >
rounded Boolean false Adds rounded corners effect to button <MDBBtnFixedItem rounded >
size String medium Determines button size, available values: [sm, lg], medium by default <MDBBtnFixedItem size="lg" >
type String button Adds type attribute to button <MDBBtnFixedItem type="submit" >