Angular Bootstrap Buttons

Angular 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

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

Examples

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

        
            
          <button type="button" mdbBtn color="primary" mdbWavesEffect>Primary</button>
          <button type="button" mdbBtn color="secondary" mdbWavesEffect>Secondary</button>
          <button type="button" mdbBtn color="success" mdbWavesEffect>Success</button>
          <button type="button" mdbBtn color="danger" mdbWavesEffect>Danger</button>
          <button type="button" mdbBtn color="warning" mdbWavesEffect>Warning</button>
          <button type="button" mdbBtn color="info" mdbWavesEffect>Info</button>
          <button type="button" mdbBtn color="light" mdbWavesEffect>Light</button>
          <button type="button" mdbBtn color="dark" mdbWavesEffect>Dark</button>
          <button type="button" mdbBtn color="link">Link</button>

Basic MDB buttons

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

        
            
          <button mdbBtn type="button" color="primary" mdbWavesEffect>Primary</button>
          <button mdbBtn type="button" color="default" mdbWavesEffect>Default</button>
          <button mdbBtn type="button" color="secondary" mdbWavesEffect>Secondary</button>
          <button mdbBtn type="button" color="success" mdbWavesEffect>Success</button>
          <button mdbBtn type="button" color="info" mdbWavesEffect>Info</button>
          <button mdbBtn type="button" color="warning" mdbWavesEffect>Warning</button>
          <button mdbBtn type="button" color="danger" mdbWavesEffect>Danger</button>

Additional buttons 

        
            
          <button mdbBtn type="button" color="elegant" mdbWavesEffect>Elegant</button>
          <button mdbBtn type="button" color="unique" mdbWavesEffect>Unique</button>
          <button mdbBtn type="button" color="pink" mdbWavesEffect>Pink</button>
          <button mdbBtn type="button" color="purple" mdbWavesEffect>Purple</button>
          <button mdbBtn type="button" color="deep-purple" mdbWavesEffect>Deep-Purple</button>
          <button mdbBtn type="button" color="indigo" mdbWavesEffect>Indigo</button>
          <button mdbBtn type="button" color="light-blue" mdbWavesEffect>Light-blue</button>
          <button mdbBtn type="button" color="cyan" mdbWavesEffect>Cyan</button>
          <button mdbBtn type="button" color="dark-green" mdbWavesEffect>Dark-Green</button>
          <button mdbBtn type="button" color="light-green" mdbWavesEffect>Light-green</button>
          <button mdbBtn type="button" color="yellow" mdbWavesEffect>Yellow</button>
          <button mdbBtn type="button" color="amber" mdbWavesEffect>Amber</button>
          <button mdbBtn type="button" color="deep-orange" mdbWavesEffect>Deep-Orange</button>
          <button mdbBtn type="button" color="brown" mdbWavesEffect>Brown</button>
          <button mdbBtn type="button" color="blue-grey" mdbWavesEffect>Blue-Grey</button>
          <button mdbBtn type="button" color="mdb-color" mdbWavesEffect>MDB</button>

Gradient buttons

Check our documentation about gradients. 

        
            
          <button mdbBtn type="button" gradient="peach" rounded="true" mdbWavesEffect>Peach</button>
          <button mdbBtn type="button" gradient="purple" rounded="true" mdbWavesEffect>Purple</button>
          <button mdbBtn type="button" gradient="blue" rounded="true" mdbWavesEffect>Blue</button>
          <button mdbBtn type="button" gradient="aqua" rounded="true" mdbWavesEffect>Aqua</button>

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the outline="true" ones to remove all background images and colors on any button. 

        
            
            <button mdbBtn type="button" color="primary" outline="true" mdbWavesEffect>Primary</button>
            <button mdbBtn type="button" color="default" outline="true" mdbWavesEffect>Default</button>
            <button mdbBtn type="button" color="secondary" outline="true" mdbWavesEffect>Secondary</button>
            <button mdbBtn type="button" color="success" outline="true" mdbWavesEffect>Success</button>
            <button mdbBtn type="button" color="info" outline="true" mdbWavesEffect>Info</button>
            <button mdbBtn type="button" color="warning" outline="true" mdbWavesEffect>Warning</button>
            <button mdbBtn type="button" color="danger" outline="true" mdbWavesEffect>Danger</button>

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 

        
            
          <button mdbBtn type="button" color="primary" rounded="true" mdbWavesEffect>Primary</button>
          <button mdbBtn type="button" color="default" rounded="true" mdbWavesEffect>Default</button>
          <button mdbBtn type="button" color="secondary" rounded="true" mdbWavesEffect>Secondary</button>
          <button mdbBtn type="button" color="success" rounded="true" mdbWavesEffect>Success</button>
          <button mdbBtn type="button" color="info" rounded="true" mdbWavesEffect>Info</button>
          <button mdbBtn type="button" color="warning" rounded="true" mdbWavesEffect>Warning</button>
          <button mdbBtn type="button" color="danger" rounded="true" mdbWavesEffect>Danger</button>

Rounded outline buttons MDB Pro component 

        
            
          <button mdbBtn type="button" color="primary" rounded="true" outline="true" mdbWavesEffect>Primary</button>
          <button mdbBtn type="button" color="default" rounded="true" outline="true" mdbWavesEffect>Default</button>
          <button mdbBtn type="button" color="secondary" rounded="true" outline="true" mdbWavesEffect>Secondary</button>
          <button mdbBtn type="button" color="success" rounded="true" outline="true" mdbWavesEffect>Success</button>
          <button mdbBtn type="button" color="info" rounded="true" outline="true" mdbWavesEffect>Info</button>
          <button mdbBtn type="button" color="warning" rounded="true" outline="true" mdbWavesEffect>Warning</button>
          <button mdbBtn type="button" color="danger" rounded="true" outline="true" mdbWavesEffect>Danger</button>

Floating buttons MDB Pro component 

        
            
          <a mdbBtn floating="true" size="lg" gradient="purple" mdbWavesEffect>
            <mdb-icon fas icon="bolt"></mdb-icon>
          </a>
          <a mdbBtn floating="true" gradient="peach" mdbWavesEffect>
            <mdb-icon fas icon="leaf"></mdb-icon>
          </a>
          <a mdbBtn floating="true" size="sm" gradient="blue" mdbWavesEffect>
            <mdb-icon fas icon="star"></mdb-icon>
          </a>

Fixed buttons MDB Pro component

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

Active on click

        
            
          <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">

            <a mdbBtn floating="true" size="lg" color="red" class="waves-light" mdbWavesEffect (click)="fixed.toggle($event)">
              <mdb-icon fas icon="pencil-alt" ></mdb-icon>
            </a>

            <div class="fixed_collapse" mdbCollapse="isCollapsed" #fixed="bs-collapse">
              <a mdbBtn floating="true" color="red" class="waves-light" mdbWavesEffect><mdb-icon fas icon="star" ></mdb-icon></a>
              <a mdbBtn floating="true" color="yellow" class="darken-1 waves-light" mdbWavesEffect><mdb-icon fas icon="user"></mdb-icon></a>
              <a mdbBtn floating="true" color="green" class="waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon></a>
              <a mdbBtn floating="true" color="blue" class="waves-light" mdbWavesEffect><mdb-icon fas icon="shopping-cart"></mdb-icon></a>
            </div>

          </div>

Active on hover

        
            
          <div class="fixed-action-btn" style="bottom: 45px; right: 24px;" (mouseleave)="fixed.toggle()">

            <a mdbBtn floating="true" size="lg" color="red" class="waves-light" mdbWavesEffect (mouseenter)="fixed.toggle()">
              <mdb-icon fas icon="pencil-alt"></mdb-icon>
            </a>

            ...

          </div>

Close menu after clicking on a link

        
            
          <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">

            <a mdbBtn floating="true" size="lg" color="red" class="waves-light" mdbWavesEffect (click)="fixed.toggle($event)">
              <mdb-icon fas icon="pencil-alt" ></mdb-icon>
            </a>

            <div class="fixed_collapse" mdbCollapse="isCollapsed" #fixed="bs-collapse">
              <a mdbBtn floating="true" color="red" class="waves-light" mdbWavesEffect>
                <mdb-icon fas icon="star" (click)="fixed.toggle($event)"></mdb-icon>
              </a>
              <a mdbBtn floating="true" color="yellow" class="darken-1 waves-light" mdbWavesEffect>
                <mdb-icon fasa icon="user"></mdb-icon>
              </a>
              <a mdbBtn floating="true" color="green" class="waves-light" mdbWavesEffect>
                <mdb-icon fas icon="envelope"></mdb-icon>
              </a>
              <a mdbBtn floating="true" color="blue" class="waves-light" mdbWavesEffect>
                <mdb-icon fas icon="shopping-cart"></mdb-icon>
              </a>
            </div>

          </div>

"Back to the top" button

"Back to the top" button is very useful with the long pages, especially on the mobile devices.

Click the button below to see the live example.

Live example

Usage: To make it work, you have to set an ID #top-section to any element on the top of the page. 

        
            
          <button
            mdbBtn
            floating="true"
            size="lg"
            color="red"
            class="waves-light"
            mdbPageScroll
            href="#top-section"
            mdbWavesEffect
            style="right:35px; bottom:35px;"
            [pageScrollDuration]="750"
          >
            <mdb-icon fas icon="arrow-up"></mdb-icon>
          </button>

Fixed button with captions

Describe each button in fixed button with mdbFixedCaption directive.

Usage: To make it work, you have to set an ID #button to button which activate the fixed button collapse, and pass the ID to the collapseButton input.

NOTE: Please note, that mdbFixedCaption directive could be use only when you want to add caption to the fixed buttons. 

        
            
          <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">

            <a mdbBtn floating="true" size="lg" color="red" class="waves-light" #button mdbWavesEffect (click)="fixed.toggle($event)">
              <mdb-icon fas icon="pencil-alt"></mdb-icon>
            </a>

            <div class="fixed_collapse" mdbCollapse="isCollapsed" #fixed="bs-collapse">
              <a
                mdbFixedCaption="Caption 1 Caption 1 Caption 1"
                [collapseButton]="button"
                mdbBtn
                floating="true"
                color="red"
                class="waves-light"
                mdbWavesEffect
              >
                <mdb-icon fas icon="star"></mdb-icon>
              </a>
              <a
                mdbFixedCaption="Caption 2"
                [collapseButton]="button"
                mdbBtn
                floating="true"
                color="yellow"
                class="darken-1 waves-light"
                mdbWavesEffect
              >
                <mdb-icon fas icon="user"></mdb-icon>
              </a>
              <a
                mdbFixedCaption="Caption 3 Caption 3"
                [collapseButton]="button"
                mdbBtn
                floating="true"
                color="green"
                class="waves-light"
                mdbWavesEffect
              >
                <mdb-icon fas icon="envelope"></mdb-icon>
              </a>
              <a
                mdbFixedCaption="Caption 1"
                [collapseButton]="button"
                mdbBtn
                floating="true"
                color="blue"
                class="waves-light"
                mdbWavesEffect
              >
                <mdb-icon fas icon="shopping-cart"></mdb-icon>
              </a>
            </div>

          </div>

Flat button MDB Pro component 

        
            
          <button mdbBtn type="button" flat="true" size="lg" mdbWavesEffect>Click me</button>

Buttons with icons

Note: To set the desired distance between icon and text use spacing utilities (for example .ml-1, .mr-2). 

        
            
          <button mdbBtn type="button" color="primary" mdbWavesEffect>
            <mdb-icon fas icon="magic" class="mr-1"></mdb-icon>Left
          </button>
          <button mdbBtn type="button" color="default" mdbWavesEffect>Right<mdb-icon fas icon="magic" class="ml-1"></mdb-icon></button>

Button tags

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

When using mdbBtn directive 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 
        
            
          <a mdbBtn href="#" role="button" color="primary" mdbWavesEffect>Link</a>
          <button mdbBtn type="submit" color="primary" mdbWavesEffect>Button</button>
          <div class="waves-input-wrapper waves-light" mdbWavesEffect><input mdbBtn color="primary" type="button" value="Input"></div>
          <div class="waves-input-wrapper waves-light" mdbWavesEffect><input mdbBtn color="primary" type="submit" value="Submit"></div>
          <div class="waves-input-wrapper waves-light" mdbWavesEffect><input mdbBtn color="primary" type="reset" value="Reset"></div>

Sizes

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

        
            
          <button mdbBtn type="button" gradient="peach" size="lg" mdbWavesEffect>Large Button</button>
          <button mdbBtn type="button" gradient="purple" size="lg" mdbWavesEffect>Large Button</button>
        
        
    
        
            
          <button mdbBtn type="button" gradient="peach" size="sm" mdbWavesEffect>Small Button</button>
          <button mdbBtn type="button" gradient="purple" size="sm" mdbWavesEffect>Small Button</button>

Create block level buttons—those that span the full width of a parent—by adding block="true". 

        
            
          <button mdbBtn type="button" color="default" block="true" mdbWavesEffect>Block Button</button>
          <button mdbBtn type="button" color="light-blue" block="true" mdbWavesEffect>Block Button</button>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

Primary link Link 
        
            
          <a mdbBtn role="button" color="primary" size="lg" class="active" aria-pressed="true" mdbWavesEffect>Primary link</a>
          <a mdbBtn role="button" color="default" size="lg" class="active" aria-pressed="true" mdbWavesEffect>Link</a>

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element. 

        
            
          <button mdbBtn type="button" color="primary" size="lg" disabled mdbWavesEffect>Primary button</button>
          <button mdbBtn type="button" color="default" size="lg" disabled mdbWavesEffect>Button</button>

Button plugin

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Toggle states

Add data-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button>. 

        
            
        <button
          mdbBtn
          type="button"
          color="primary"
          autocomplete="off"
          [(ngModel)]="singleModel"
          mdbCheckbox
          btnCheckboxTrue="1"
          btnCheckboxFalse="0"
          mdbWavesEffect
        >
          Single toggle
        </button>

Checkbox and radio buttons

Bootstrap’s mdbBtn directive can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable toggling in their respective styles.

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.

Note that pre-checked buttons require you to manually add the .active class to the input’s <label>. 

        
            
          <!-- Checkbox -->
          <div class="btn-group">
            <label mdbBtn color="primary" [(ngModel)]="checkModel.left" mdbCheckbox mdbWavesEffect>
              Checkbox 1 (pre-checked)
            </label>
            <label mdbBtn color="primary" [(ngModel)]="checkModel.middle" mdbCheckbox mdbWavesEffect>
              Checkbox 2
            </label>
            <label mdbBtn color="primary" [(ngModel)]="checkModel.right" mdbCheckbox mdbWavesEffect>
              Checkbox 3
            </label>
          </div>

          <!-- Radio -->
          <div class="btn-group">
            <label mdbBtn color="primary" [(ngModel)]="radioModel" mdbRadio="Left" mdbWavesEffect>
              Radio 1 (pre-checked)
            </label>
            <label mdbBtn color="primary" [(ngModel)]="radioModel" mdbRadio="Middle" mdbWavesEffect>
              Radio 2
            </label>
            <label mdbBtn color="primary" [(ngModel)]="radioModel" mdbRadio="Right" mdbWavesEffect>
              Radio 3
            </label>
          </div>
        
        
    
        
            
          export class AppComponent {
            public checkModel: any = { left: true, middle: false, right: false };
            public radioModel: string = 'Left';
          }

Angular Buttons - API

In this section you will find informations about buttons and its required modules and available inputs, outputs, methods and events.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

Edit in sandbox 
        
            
          import { ButtonsModule, WavesModule, CollapseModule } from 'ng-uikit-pro-standard'
        
        
    
        
            
          import { ButtonsModule, WavesModule, CollapseModule } from 'angular-bootstrap-md'
Import example Modules list

Inputs

MdbBtnDirective
Name Type Default Description Example
color string ' ' Allow to set color of a button. color="primary"
rounded boolean false Allow to change button style to rounded. rounded="true"
gradient string ' ' Allow to add a gradient background color to the button. gradient="peach"
outline boolean false Allow to change button style to outline. outline="true"
flat boolean false Allow to change button style to flat flat="true"
size string ' ' Allow to change size of the button. Available values are: sm, lg. size="lg"
block boolean false Allow to change button style to block. block="true"
floating boolean false Allow to change button style to floating. floating="true"
MdbFixedCaptionDirective
Name Type Default Description Example
mdbFixedCaption string - Used do render fixed button's caption. mdbFixedCaption="Fixed button caption"
collapseButton Element - Use to pass fixed button reference inside the directive. This input is necessary. [collapseButton]="button"