Bootstrap buttons
Use MDB’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
All the visually attractive and highly functional buttons we provided you with are fully customizable and easily adjustable to your needs.
Each of them contains characteristic Material Design elements, such as shadows, living colors, subtle animation on hovering, or charming waves effect triggered by clicking.
Check also our Social Buttons.
Sizes
Fancy larger or smaller buttons? Add .btn-lg
or .btn-sm
for additional sizes.
<button type="button" class="btn btn-primary btn-lg wave" ripple-radius>Large button</button>
<button type="button" class="btn btn-secondary btn-lg wave" ripple-radius>Large button</button>
<button type="button" class="btn btn-primary btn-sm" ripple-radius>Small button</button>
<button type="button" class="btn btn-secondary btn-sm" ripple-radius>Small button</button>
Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block" ripple-radius>Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block" ripple-radius>Block level button</button>
Active state
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active.
Button active Button active
<a class="btn btn-primary btn-lg active" role="button" ripple-radius>Button active</a>
<a class="btn btn-danger btn-lg active" role="button" ripple-radius>Button active</a>
Disabled state
Make buttons look inactive by adding the disabled
boolean attribute to any <button>
element.
Heads up! IE9 and below render disabled buttons with gray, shadowed text that we can’t override.
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
As <a>
elements don’t support the disabled
attribute, you must add the .disabled
class to fake it.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
Toggle states
<button type="button" class="btn btn-primary" autocomplete="off" [(ngModel)]="singleModel" btnCheckbox btnCheckboxTrue="1" btnCheckboxFalse="0" ripple-radius>
Single toggle
</button>
Checkbox and radio buttons
Bootstrap’s .button
styles can be applied to other elements, such as <label>
s, to provide checkbox or radio style button toggling.
Add [(ngModel)]="checkModel.direction"
(left/middle/right) btnCheckbox
to the labels to use a checkbox.
<div class="btn-group">
<label class="btn btn-primary" [(ngModel)]="checkModel.left" btnCheckbox ripple-radius>Checkbox 1 (pre-checked)</label>
<label class="btn btn-primary" [(ngModel)]="checkModel.middle" btnCheckbox ripple-radius>Checkbox 2</label>
<label class="btn btn-primary" [(ngModel)]="checkModel.right" btnCheckbox ripple-radius>Checkbox 3</label>
</div>
Data structure:
export class AppComponent {
public checkModel: any = { left: true, middle: false, right: false };
}
Add [(ngModel)]="radioModel" btnRadio="direction"
(left/middle/right) to the labels to use a radio.
<div class="btn-group">
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="Left" ripple-radius>Radio 1 (preselected)</label>
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="Middle" ripple-radius>Radio 2</label>
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="Right" ripple-radius>Radio 3</label>
</div>
Data structure:
export class AppComponent {
public radioModel: string = 'Left';
}