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.

Hierarchy

Buttons, as one of the key UI elements, must have their own hierarchy. This means that the user should be able to easily identify which button is the most important (primary button), which is less important (secondary button) and which presents completely additional information (tertiary button).

Elements with strong, filled backgrounds and shadows attract attention the most, which is why button primary is built in this way.

A delicate background without shadows is less engaging, so it is well suited for button secondary.

The lack of background and shadow makes the element the least visible. These features characterize the button tertiary.

Note: Button tertiary may require additional margins. Without extra margins, the button edge will be flush with adjacent elements (which is sometimes the desired result). If you need margin - simply add margin utility classes like mx-2.

        
            
            import React from 'react';
            import { MDBBtn } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBBtn className='me-1'>
                    Primary
                  </MDBBtn>
                  <MDBBtn className='me-1' color='secondary'>
                    Secondary
                  </MDBBtn>
                  <MDBBtn className='mx-2' color='tertiary' rippleColor='light'>
                    Tertiary
                  </MDBBtn>
                </>
              );
            }

Contextual

MDB includes several predefined button styles, each serving its own semantic purpose. 

        
            
            import React from 'react';
            import { MDBBtn } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBBtn className='me-1' color='success'>
                    Success
                  </MDBBtn>
                  <MDBBtn className='me-1' color='danger'>
                    Danger
                  </MDBBtn>
                  <MDBBtn className='me-1' color='warning'>
                    Warning
                  </MDBBtn>
                  <MDBBtn color='info'>
                    Info
                  </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 class.

Neutral

Neutral buttons provide additional light and dark colors. 

        
            
            import React from 'react';
            import { MDBBtn } from 'mdb-react-ui-kit';
    
            export default function App() {
              return (
                <>
                  <MDBBtn color='light' rippleColor='dark'>
                    Light
                  </MDBBtn>
                  <MDBBtn color='dark'>
                    Dark
                  </MDBBtn>
                </>
              );
            }

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 className="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 className="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 className="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 className="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
active boolean false Makes a button active <MDBBtn active />
block boolean false Makes a button with a display: block; style <MDBBtn block />
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" />
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 />
noRipple boolean false Removes a ripple effect <MDBBtn noRipple />
outline boolean false Removes a background color or images from MDBBtn element <MDBBtn outline />
rippleCentered boolean false If ripple is active, centers the position of ripple <MDBBtn rippleCentered />
rippleColor string false If ripple is active, changes color of ripple. <MDBBtn rippleColor="secondary" />
rippleDuration number 500 If ripple is active, sets duration of animation. <MDBBtn rippleDuration={300} />
rippleRadius number 0 If ripple is active, sets radius value. <MDBBtn rippleRadius={10} />
rippleUnbound boolean false If ripple is active, sets whether the effect should go beyound the wrapper's boundaries. <MDBBtn rippleUnbound />
rounded boolean false Makes a rounded MDBBtn element <MDBBtn rounded />
size string 'sm' | 'lg' Sets the size of the button <MDBBtn size="lg" />
tag string 'button' Defines tag of the MDBBtn element <MDBBtn tag="section" />
toggle boolean false Enables changing button state by click <MDBBtn toggle />

CSS variables

As part of MDB’s evolving CSS variables approach, buttons now use local CSS variables on .btn for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Button's CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables. 

        
            
        // .btn
        --#{$prefix}btn-padding-x: #{$btn-padding-x};
        --#{$prefix}btn-padding-top: #{$btn-padding-top};
        --#{$prefix}btn-padding-bottom: #{$btn-padding-bottom};
        --#{$prefix}btn-font-family: #{$btn-font-family};
        @include rfs($btn-font-size, --#{$prefix}btn-font-size);
        --#{$prefix}btn-font-weight: #{$btn-font-weight};
        --#{$prefix}btn-line-height: #{$btn-line-height};
        --#{$prefix}btn-color: #{$body-color};
        --#{$prefix}btn-bg: transparent;
        --#{$prefix}btn-border-width: 0;
        --#{$prefix}btn-border-color: none;
        --#{$prefix}btn-border-radius: #{$btn-border-radius};
        --#{$prefix}btn-hover-border-color: transparent;
        --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
        --#{$prefix}btn-hover-box-shadow: #{$btn-hover-box-shadow};
        --#{$prefix}btn-focus-box-shadow: #{$btn-focus-box-shadow};
        --#{$prefix}btn-active-box-shadow: #{$btn-active-box-shadow};
        --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
        
        // [class*='btn-outline-']
        --#{$prefix}btn-padding-top: #{$btn-outline-padding-top};
        --#{$prefix}btn-padding-bottom: #{$btn-outline-padding-bottom};
        --#{$prefix}btn-padding-x: #{$btn-outline-padding-x};
        --#{$prefix}btn-border-width: #{$btn-outline-border-width};
        --#{$prefix}btn-line-height: #{$btn-line-height};
        
        // .btn-link
        --#{$prefix}btn-font-weight: #{$font-weight-medium};
        --#{$prefix}btn-color: #{$btn-link-color};
        --#{$prefix}btn-bg: transparent;
        --#{$prefix}btn-border-color: transparent;
        --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
        --#{$prefix}btn-hover-bg: #{$btn-link-hover-bg};
        --#{$prefix}btn-hover-border-color: transparent;
        --#{$prefix}btn-focus-color: #{$btn-link-focus-color};
        --#{$prefix}btn-active-color: #{$btn-link-active-color};
        --#{$prefix}btn-active-border-color: transparent;
        --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
        --#{$prefix}btn-disabled-border-color: transparent;
        --#{$prefix}btn-box-shadow: none;
        --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
        
        // .btn-tertiary
        --#{$prefix}btn-font-weight: #{$font-weight-medium};
        --#{$prefix}btn-color: #{$btn-link-color};
        --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
        --#{$prefix}btn-hover-bg: transparent;
        --#{$prefix}btn-focus-color: #{$btn-link-focus-color};
        --#{$prefix}btn-active-color: #{$btn-link-active-color};
        --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
        --#{$prefix}btn-box-shadow: none;
        
        // .btn-rounded
        --#{$prefix}btn-border-radius: #{$btn-rounded-border-radius};
        
        // .btn-floating,
        // [class*='btn-outline-'].btn-floating
        --#{$prefix}btn-border-radius: #{$btn-floating-border-radius};
        
        // .btn-floating
        --#{$prefix}btn-width: #{$btn-floating-width};
        --#{$prefix}btn-height: #{$btn-floating-height};
        --#{$prefix}btn-icon-width: #{$btn-floating-icon-width};
        --#{$prefix}btn-icon-line-height: #{$btn-floating-icon-line-height};
        --#{$prefix}btn-width-lg: #{$btn-floating-width-lg};
        --#{$prefix}btn-height-lg: #{$btn-floating-height-lg};
        --#{$prefix}btn-icon-width-lg: #{$btn-floating-icon-width-lg};
        --#{$prefix}btn-icon-line-height-lg: #{$btn-floating-icon-line-height-lg};
        --#{$prefix}btn-width-sm: #{$btn-floating-width-sm};
        --#{$prefix}btn-height-sm: #{$btn-floating-height-sm};
        --#{$prefix}btn-icon-width-sm: #{$btn-floating-icon-width-sm};
        --#{$prefix}btn-icon-line-height-sm: #{$btn-floating-icon-line-height-sm};
        
        // [class*='btn-outline-'].btn-floating
        --#{$prefix}btn-icon-width: #{$btn-outline-floating-icon-width};
        --#{$prefix}btn-icon-width-lg: #{$btn-outline-floating-icon-width-lg};
        --#{$prefix}btn-icon-width-sm: #{$btn-outline-floating-icon-width-sm};
        --#{$prefix}btn-icon-line-height: #{$btn-outline-floating-icon-line-height};
        --#{$prefix}btn-icon-line-height-lg: #{$btn-outline-floating-icon-line-height-lg};
        --#{$prefix}btn-icon-line-height-sm: #{$btn-outline-floating-icon-line-height-sm};
        
        // .fixed-action-btn
        --#{$prefix}btn-right: #{$fixed-action-btn-right};
        --#{$prefix}btn-bottom: #{$fixed-action-btn-bottom};
        --#{$prefix}btn-zindex: #{$fixed-action-button-zindex};
        --#{$prefix}btn-padding-top: #{$fixed-action-btn-padding-top};
        --#{$prefix}btn-padding-bottom: #{$fixed-action-btn-padding-bottom};
        --#{$prefix}btn-padding-x: #{$fixed-action-btn-padding-x};
        --#{$prefix}btn-margin-bottom: #{$fixed-action-btn-li-margin-bottom};
        
        // .btn-block
        --#{$prefix}btn-margin-top: #{$btn-block-margin-top};

SCSS variables

        
            
        $btn-padding-top: 0.625rem;
        $btn-padding-bottom: 0.5rem;
        $btn-padding-x: 1.5rem;
        $btn-font-size: 0.75rem;
        $btn-line-height: 1.5;
        $btn-font-size: $input-btn-font-size;
        $btn-white-space: null;
        
        $btn-padding-top-lg: 0.75rem;
        $btn-padding-bottom-lg: 0.6875rem;
        $btn-padding-x-lg: 1.6875rem;
        $btn-font-size-lg: 0.875rem;
        $btn-line-height-lg: 1.6;
        
        $btn-padding-top-sm: 0.375rem;
        $btn-padding-bottom-sm: 0.3125rem;
        $btn-padding-x-sm: 1rem;
        $btn-font-size-sm: 0.75rem;
        $btn-line-height-sm: 1.5;
        
        $btn-border-width: $border-width-alternate;
        
        $btn-font-weight: $font-weight-medium;
        $btn-box-shadow: 0 4px 9px -4px rgba($black, 0.35);
        $btn-hover-box-shadow: 0 8px 9px -4px rgba($black, 0.15), 0 4px 18px 0 rgba($black, 0.1);
        $btn-focus-box-shadow: $btn-hover-box-shadow;
        $btn-active-box-shadow: $btn-focus-box-shadow;
        $btn-focus-width: $input-btn-focus-width;
        $btn-disabled-opacity: 0.65;
        
        $btn-link-color: $link-color;
        $btn-link-hover-color: $link-hover-color;
        $btn-link-focus-color: $link-focus-color;
        $btn-link-active-color: $link-active-color;
        $btn-link-disabled-color: $gray-500;
        $btn-link-hover-bg: hsl(0, 0%, 96%);
        
        $btn-border-radius: $border-radius;
        
        $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        
        $btn-hover-bg-shade-amount: 5%;
        $btn-focus-bg-shade-amount: 5%;
        $btn-active-bg-shade-amount: 10%;
        
        $btn-contextual-box-shadow: 0 4px 9px -4px;
        $btn-contextual-box-shadow-state-first-part: 0 8px 9px -4px;
        $btn-contextual-box-shadow-state-second-part: 0 4px 18px 0;
        
        $btn-outline-padding-top: 0.5rem;
        $btn-outline-padding-bottom: 0.375rem;
        $btn-outline-padding-x: 1.375rem;
        $btn-outline-border-width: $border-width-alternate;
        $btn-outline-line-height: 1.5;
        
        $btn-outline-padding-top-lg: 0.625rem;
        $btn-outline-padding-bottom-lg: 0.5625rem;
        $btn-outline-padding-x-lg: 1.5625rem;
        $btn-outline-font-size-lg: 0.875rem;
        $btn-outline-line-height-lg: 1.6;
        
        $btn-outline-padding-top-sm: 0.25rem;
        $btn-outline-padding-bottom-sm: 0.1875rem;
        $btn-outline-padding-x-sm: 0.875rem;
        $btn-outline-font-size-sm: 0.75rem;
        $btn-outline-line-height-sm: 1.5;
        
        $btn-rounded-border-radius: 10rem;
        
        $btn-floating-border-radius: 50%;
        
        $btn-floating-width: 2.3125rem;
        $btn-floating-height: 2.3125rem;
        $btn-floating-icon-width: 2.3125rem;
        
        $btn-floating-width-lg: 2.8125rem;
        $btn-floating-height-lg: 2.8125rem;
        $btn-floating-icon-width-lg: 2.8125rem;
        
        $btn-floating-width-sm: 1.8125rem;
        $btn-floating-height-sm: 1.8125rem;
        $btn-floating-icon-width-sm: 1.8125rem;
        
        $btn-outline-floating-icon-width: 2.0625rem;
        $btn-outline-floating-icon-width-lg: 2.5625rem;
        $btn-outline-floating-icon-width-sm: 1.5625rem;
        
        $btn-floating-icon-line-height: 2.3125rem;
        $btn-floating-icon-line-height-lg: 2.8125rem;
        $btn-floating-icon-line-height-sm: 1.8125rem;
        
        $btn-outline-floating-icon-line-height: 2.0625rem;
        $btn-outline-floating-icon-line-height-lg: 2.5625rem;
        $btn-outline-floating-icon-line-height-sm: 1.5625rem;
        
        $fixed-action-btn-right: 2.1875rem;
        $fixed-action-btn-bottom: 2.1875rem;
        $fixed-action-btn-padding-top: 0.9375rem;
        $fixed-action-btn-padding-bottom: 1.25rem;
        $fixed-action-btn-padding-x: 1.25rem;
        $fixed-action-btn-li-margin-bottom: 1.5rem;
        
        $btn-block-margin-top: 0.5rem;