Buttons

React Bootstrap 5 Buttons component

Use MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Note: Read the API tab to find all available options and advanced customization

Basic example

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBBtn>Button</MDBBtn>
            );
          }

Disable text wrapping

If you don’t want the button text to wrap, you can add the .text-nowrap className to the button. In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button.

Colors

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

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn>Primary</MDBBtn>
                <MDBBtn className='mx-2' color='secondary'>
                  Secondary
                </MDBBtn>
                <MDBBtn color='success'>Success</MDBBtn>
                <MDBBtn className='mx-2' color='danger'>
                  Danger
                </MDBBtn>
                <MDBBtn color='warning'>Warning</MDBBtn>
                <MDBBtn className='mx-2' color='info'>
                  Info
                </MDBBtn>
                <MDBBtn className='text-dark' color='light'>
                  Light
                </MDBBtn>
                <MDBBtn className='mx-2' color='dark'>
                  Dark
                </MDBBtn>
                <MDBBtn color='link'>Link</MDBBtn>
              </>
            );
          }

Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden className.

Outline

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

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn outline>Primary</MDBBtn>
                <MDBBtn outline className='mx-2' color='secondary'>
                  Secondary
                </MDBBtn>
                <MDBBtn outline color='success'>
                  Success
                </MDBBtn>
                <MDBBtn outline className='mx-2' color='danger'>
                  Danger
                </MDBBtn>
                <MDBBtn outline color='warning'>
                  Warning
                </MDBBtn>
                <MDBBtn outline className='mx-2' color='info'>
                  Info
                </MDBBtn>
                <MDBBtn outline color='light'>
                  Light
                </MDBBtn>
                <MDBBtn outline className='mx-2' color='dark'>
                  Dark
                </MDBBtn>
                <MDBBtn outline color='link'>
                  Link
                </MDBBtn>
              </>
            );
          }

Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

Rounded

Add rounded property to make the button rounded.

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn rounded>Primary</MDBBtn>
                <MDBBtn rounded className='mx-2' color='secondary'>
                  Secondary
                </MDBBtn>
                <MDBBtn rounded color='success'>
                  Success
                </MDBBtn>
                <MDBBtn rounded className='mx-2' color='danger'>
                  Danger
                </MDBBtn>
                <MDBBtn rounded color='warning'>
                  Warning
                </MDBBtn>
                <MDBBtn rounded className='mx-2' color='info'>
                  Info
                </MDBBtn>
                <MDBBtn rounded className='text-dark' color='light'>
                  Light
                </MDBBtn>
                <MDBBtn rounded className='mx-2' color='dark'>
                  Dark
                </MDBBtn>
                <MDBBtn rounded color='link'>
                  Link
                </MDBBtn>
              </>
            );
          }

Rounded outline

You can use outline and rounded together to make the button outline and rounded at the same time. 

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn outline rounded>
                  Primary
                </MDBBtn>
                <MDBBtn outline rounded className='mx-2' color='secondary'>
                  Secondary
                </MDBBtn>
                <MDBBtn outline rounded color='success'>
                  Success
                </MDBBtn>
                <MDBBtn outline rounded className='mx-2' color='danger'>
                  Danger
                </MDBBtn>
                <MDBBtn outline rounded color='warning'>
                  Warning
                </MDBBtn>
                <MDBBtn outline rounded className='mx-2' color='info'>
                  Info
                </MDBBtn>
                <MDBBtn outline rounded color='light'>
                  Light
                </MDBBtn>
                <MDBBtn outline rounded className='mx-2' color='dark'>
                  Dark
                </MDBBtn>
                <MDBBtn outline rounded color='link'>
                  Link
                </MDBBtn>
              </>
            );
          }

Floating

Use floating property to make a circle button.

To make it works properly you have to put an icon inside. The text will not fit in. You can find hundreds of available icons in our icons docs. 

        
            
          import React from 'react';
          import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBBtn floating tag='a'>
                <MDBIcon fas icon='download' />
              </MDBBtn>
            );
          }

You can apply almost all the same classes and attributes to the floating buttons as to the regular buttons - colors, sizes, outline, etc. 

        
            
          import React from 'react';
          import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn floating size='lg' tag='a'>
                  <MDBIcon fab icon='facebook-f' />
                </MDBBtn>
                <MDBBtn className='mx-2' tag='a' color='success' outline floating>
                  <MDBIcon fas icon='star' />
                </MDBBtn>
                <MDBBtn color='danger' tag='a' floating>
                  <MDBIcon fas icon='magic' />
                </MDBBtn>
                <MDBBtn className='ms-2' tag='a' color='dark' floating>
                  <MDBIcon fab icon='apple' />
                </MDBBtn>
              </>
            );
          }

Social

Combining our icons and custom colors you can create social buttons. Combining our icons and custom colors you can create social buttons. See all available icons in our icons search (check "brands" to filter brand icons).

In the example below, we place a Facebook icon <MDBIcon fab icon="facebook-f"/> inside the button and set a background-color to #3B5998 (facebook brand color). 

        
            
          import React from 'react';
          import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBBtn style={{ backgroundColor: '#3b5998' }} href='#'>
                <MDBIcon fab icon='facebook-f' />
              </MDBBtn>
            );
          }

Sample brands

A few the most popular brands in form of social buttons.

        
            
            import React from 'react';
            import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBBtn className='m-1' style={{ backgroundColor: '#3b5998' }} href='#'>
                    <MDBIcon fab icon='facebook-f' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#55acee' }} href='#'>
                    <MDBIcon fab icon='twitter' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#dd4b39' }} href='#'>
                    <MDBIcon fab icon='google' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#ac2bac' }} href='#'>
                    <MDBIcon fab icon='instagram' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#0082ca' }} href='#'>
                    <MDBIcon fab icon='linkedin-in' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#c61118' }} href='#'>
                    <MDBIcon fab icon='pinterest' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#4c75a3' }} href='#'>
                    <MDBIcon fab icon='vk' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#ffac44' }} href='#'>
                    <MDBIcon fab icon='stack-overflow' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#ed302f' }} href='#'>
                    <MDBIcon fab icon='youtube' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#481449' }} href='#'>
                    <MDBIcon fab icon='slack-hash' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#333333' }} href='#'>
                    <MDBIcon fab icon='github' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#ec4a89' }} href='#'>
                    <MDBIcon fab icon='dribbble' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#ff4500' }} href='#'>
                    <MDBIcon fab icon='reddit-alien' />
                  </MDBBtn>
    
                  <MDBBtn className='m-1' style={{ backgroundColor: '#25d366' }} href='#'>
                    <MDBIcon fab icon='whatsapp' />
                  </MDBBtn>
                </>
              );
            }

Floating social

By adding floating property you can create a nice, floating social button. 

        
            
            import React from 'react';
            import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBBtn size='lg' floating style={{ backgroundColor: '#ac2bac' }} href='#'>
                  <MDBIcon fab icon='instagram' />
                </MDBBtn>
              );
            }

Text

You don't need to use only an icon. You can add text to the button. Remember to add some spacing classNames (for example .me-2) to provide a proper space between icon and text.

Twitter 
        
            
            import React from 'react';
            import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBBtn style={{ backgroundColor: '#55acee' }} href='#'>
                  <MDBIcon className='me-2' fab icon='twitter' /> Twitter
                </MDBBtn>
              );
            }

Only icon

By setting button color property to none and replacing background-color with color you can create minimalistic, clickable icons. 

        
            
            import React from 'react';
            import { MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBBtn tag='a' color='none' className='m-1' style={{ color: '#3b5998' }}>
                    <MDBIcon fab icon='facebook-f' size='lg' />
                  </MDBBtn>
    
                  <MDBBtn tag='a' color='none' className='m-1' style={{ color: '#55acee' }}>
                    <MDBIcon fab icon='twitter' size='lg' />
                  </MDBBtn>
    
                  <MDBBtn tag='a' color='none' className='m-1' style={{ color: '#dd4b39' }}>
                    <MDBIcon fab icon='google' size='lg' />
                  </MDBBtn>
    
                  <MDBBtn tag='a' color='none' className='m-1' style={{ color: '#ac2bac' }}>
                    <MDBIcon fab icon='instagram' size='lg' />
                  </MDBBtn>
                </>
              );
            }

Notifications

By using a badge you can create a button with a notification to provide a counter.

8 
        
            
            import React from 'react';
            import { MDBBtn, MDBIcon, MDBBadge } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <MDBBtn style={{ backgroundColor: '#3b5998' }} href='#'>
                  <MDBIcon fab icon='facebook-f' />{' '}
                  <MDBBadge color='danger' className='ms-2'>
                    8
                  </MDBBadge>
                </MDBBtn>
              );
            }

Tags

The .btn classNames are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

When using button classes on <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" to appropriately convey their purpose to assistive technologies such as screen readers.

Link 
        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn tag='a' href='#'>
                  Link
                </MDBBtn>
                <MDBBtn className='mx-2' tag='a'>
                  Button
                </MDBBtn>
                <MDBBtn tag='input' value='Input' />
                <MDBBtn className='mx-2' tag='input' type='submit' value='Submit' />
                <MDBBtn tag='input' type='reset' value='Reset' />
              </>
            );
          }

Sizes

Fancy larger or smaller buttons? Add size='lg' or size='sm' property for additional sizes. 

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn size='sm'>Button</MDBBtn>
                <MDBBtn className='mx-2'>Button</MDBBtn>
                <MDBBtn size='lg'>Button</MDBBtn>
              <>
            );
          }

Active state

Add active property to make the button look pressed.

Primary link Link 
        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn size='lg' className='me-2' active>
                  Button
                </MDBBtn>
                <MDBBtn size='lg' tag='a' href='#' color='secondary' active>
                  Link
                </MDBBtn>
              </>
            );
          }

Disabled state

Make buttons look inactive by adding the disabled boolean property to any <MDBBtn> component. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering. 

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn className='me-2' disabled size='lg'>
                  Primary button
                </MDBBtn>
                <MDBBtn color='secondary' disabled size='lg'>
                  Button
                </MDBBtn>
              <>
            );
          }

Disabled buttons using the <a> element behave a bit different:

  • <a>s don’t support the disabled attribute, so disabled property will add the .disabled className to make it visually appear disabled.
  • Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.
  • Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.
Primary link Link 
        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn className='me-2' tag='a' href='#' disabled size='lg' tabIndex='-1' aria-disabled>
                  Primary link
                </MDBBtn>
                <MDBBtn tag='a' href='#' color='secondary' disabled size='lg' tabIndex='-1' aria-disabled>
                  Link
                </MDBBtn>
              </>
            );
          }

Link functionality caveat:
The .disabled className uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1" attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.

Block buttons

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors. 

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <div class="d-grid gap-2">
                <MDBBtn>Button</MDBBtn>
                <MDBBtn>Button</MDBBtn>
              </div>
            );
          }

Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .d-md-block replaces the .d-grid className, thus nullifying the gap-2 utility. Resize your browser to see them change. 

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <div class="d-grid gap-2 d-md-block">
                <MDBBtn>Button</MDBBtn>
                <MDBBtn>Button</MDBBtn>
              </div>
            );
          }

You can adjust the width of your block buttons with grid column width classNames. For example, for a half-width “block button”, use .col-6. Center it horizontally with .mx-auto, too. 

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <div class="d-grid gap-2 col-6 mx-auto">
                <MDBBtn>Button</MDBBtn>
                <MDBBtn>Button</MDBBtn>
              </div>
            );
          }

Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked. 

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <MDBBtn>Button</MDBBtn>
                <MDBBtn>Button</MDBBtn>
              </div>
            );
          }

Toggle states

Add toggle property to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the active property. 

        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn toggle>Toggle button</MDBBtn>
                <MDBBtn className='mx-2' toggle active>
                  Active toggle button
                </MDBBtn>
                <MDBBtn toggle disabled>
                  Disabled toggle button
                </MDBBtn>
              </>
            );
          }
Toggle link Active toggle link Disabled toggle link 
        
            
          import React from 'react';
          import { MDBBtn } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBBtn href='#' toggle>
                  Toggle link
                </MDBBtn>
                <MDBBtn href='#' className='mx-2' toggle active>
                  Active toggle link
                </MDBBtn>
                <MDBBtn href='#' toggle disabled>
                  Disabled toggle link
                </MDBBtn>
              </>
            );
          }

Buttons - API

Import

        
            
      import { MDBBtn } from 'mdb-react-ui-kit';

Properties

MDBBtn

Name Type Default Description Example
tag string 'button' Defines tag of the MDBBtn element <MDBBtn tag="section" />
color 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'light' | 'dark' | 'muted' | 'white' | 'info' | 'none' | 'link' 'primary' Defines the color of the MDBBtn element. You can set it to "none" if you want a transparent button <MDBBtn color="secondary" />
className string '' Add custom class to MDBBtn <MDBBtn className="class" />
outline boolean false Removes a background color or images from MDBBtn element <MDBBtn outline />
rounded boolean false Makes a rounded MDBBtn element <MDBBtn rounded />
disabled boolean false Adds disabled attribute or a .disabled className to the MDBBtn element <MDBBtn disabled />
floating boolean false Makes a circle button <MDBBtn floating />
size string 'sm' | 'lg' Sets the size of the button <MDBBtn size="lg" />
block boolean false Makes a button with a display: block; style <MDBBtn block />
active boolean false Makes a button active <MDBBtn active />
toggle boolean false Enables changing button state by click <MDBBtn toggle />
noRipple boolean false Removes a ripple effect <MDBBtn noRipple />