Flat buttons and raised buttons are the most commonly used types.
Buttons
Flat buttons
Flat buttons are text-only buttons. They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press.
Outline buttons, i.e. .btn-outline-*
, are the equivalent of Material flat buttons. For more details, please refer to Components/Buttons documentation.
<button class="btn btn-flat my-xs" type="button">Flat</button>
<button class="btn btn-flat-primary my-xs" type="button">Primary</button>
<button class="btn btn-flat-secondary my-xs" type="button">Secondary</button>
<button class="btn btn-flat-danger my-xs" type="button">Danger</button>
<button class="btn btn-flat-info my-xs" type="button">Info</button>
<button class="btn btn-flat-success my-xs" type="button">Success</button>
<button class="btn btn-flat-warning my-xs" type="button">Warning</button>
<button class="btn btn-flat-dark my-xs" type="button">Dark</button>
<button class="btn btn-flat-light my-xs" type="button">Light</button>
Raised buttons
Raised buttons are rectangular-shaped buttons. They may be used inline. They lift and display ink reactions on press.
Default buttons, i.e. .btn
, are the equivalent of Material raised buttons. For more details, please refer to Components/Buttons documentation.
<button class="btn my-xs" type="button">Raised</button>
<button class="btn btn-primary my-xs" type="button">Primary</button>
<button class="btn btn-secondary my-xs" type="button">Secondary</button>
<button class="btn btn-danger my-xs" type="button">Danger</button>
<button class="btn btn-info my-xs" type="button">Info</button>
<button class="btn btn-success my-xs" type="button">Success</button>
<button class="btn btn-warning my-xs" type="button">Warning</button>
<button class="btn btn-dark my-xs" type="button">Dark</button>
<button class="btn btn-light my-xs" type="button">Light</button>
Floating action buttons
A floating action button represents the primary action in an application, it is used for a promoted action.
<button class="btn btn-float" type="button"><i class="material-icons">add</i></button>
Colours
<button class="btn btn-float btn-primary" type="button"><i class="material-icons">edit</i></button>
<button class="btn btn-float btn-secondary" type="button"><i class="material-icons">grade</i></button>
<button class="btn btn-float btn-danger" type="button"><i class="material-icons">favorite</i></button>
<button class="btn btn-float btn-info" type="button"><i class="material-icons">reply</i></button>
<button class="btn btn-float btn-success" type="button"><i class="material-icons">people</i></button>
<button class="btn btn-float btn-warning" type="button"><i class="material-icons">my_location</i></button>
Dropdown
Floating action buttons can also work with dropdown menus to fling out related actions:
<div class="btn-float-dropdown dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-float btn-primary" data-toggle="dropdown" type="button"><i class="material-icons">add</i></button>
<div class="dropdown-menu">
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
</div>
</div>
Or flinging them upwards:
<div class="btn-float-dropdown dropup">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-float btn-primary" data-toggle="dropdown" type="button"><i class="material-icons">add</i></button>
<div class="dropdown-menu">
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
<button class="btn btn-float btn-light btn-sm" type="button"><i class="material-icons">link</i></button>
</div>
</div>
Sizes
A smaller sized, i.e. mini floating action button, is also available.
<button class="btn btn-float btn-sm" type="button"><i class="material-icons">add</i></button>
Toggle buttons
Toggle buttons may be used to group related options, similar to Components/Button group. Use flat buttons (i.e. .btn-outline
s or .btn-outline-*
s) instead of raised buttons to achieve a look that is more in line with the specifications laid out in Material Design Guidelines.
<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-outline btn-sm active">
<input autocomplete="off" checked name="options1" type="radio">
<i class="material-icons">format_align_left</i>
</label>
<label class="btn btn-outline btn-sm">
<input autocomplete="off" name="options1" type="radio">
<i class="material-icons">format_align_center</i>
</label>
<label class="btn btn-outline btn-sm">
<input autocomplete="off" name="options1" type="radio">
<i class="material-icons">format_align_right</i>
</label>
<label class="btn btn-outline btn-sm">
<input autocomplete="off" name="options1" type="radio">
<i class="material-icons">format_align_justify</i>
</label>
</div>
Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to be selected.
<div class="btn-group" data-toggle="buttons" role="group">
<button class="btn btn-outline btn-sm" disabled>
<i class="material-icons">attach_file</i>
</button>
<label class="btn btn-outline btn-sm active">
<input autocomplete="off" checked name="options2" type="checkbox">
<i class="material-icons">format_bold</i>
</label>
<label class="btn btn-outline btn-sm active">
<input autocomplete="off" checked name="options2" type="checkbox">
<i class="material-icons">format_italic</i>
</label>
<label class="btn btn-outline btn-sm active">
<input autocomplete="off" checked name="options2" type="checkbox">
<i class="material-icons">format_underlined</i>
</label>
<div class="btn-group" role="group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-outline btn-sm dropdown-toggle" data-toggle="dropdown" id="toggleBtnDrop1" type="button"><i class="material-icons">format_color_text</i></button>
<div aria-labelledby="toggleBtnDrop1" class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Colour 1</a>
<a class="dropdown-item" href="#">Colour 2</a>
<a class="dropdown-item" href="#">Colour 3</a>
</div>
</div>
<div class="btn-group" role="group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-outline btn-sm dropdown-toggle" data-toggle="dropdown" id="toggleBtnDrop2" type="button"><i class="material-icons">format_color_fill</i></button>
<div aria-labelledby="toggleBtnDrop2" class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Colour 1</a>
<a class="dropdown-item" href="#">Colour 2</a>
<a class="dropdown-item" href="#">Colour 3</a>
</div>
</div>
</div>
Purely flat toggle buttons can be achieved by adding .btn-group-fluid
class.
<div class="btn-group btn-group-fluid" data-toggle="buttons" role="group">
<label class="btn btn-outline btn-sm active">
<input autocomplete="off" checked name="options3" type="radio">
<i class="material-icons">format_align_left</i>
</label>
<label class="btn btn-outline btn-sm">
<input autocomplete="off" name="options3" type="radio">
<i class="material-icons">format_align_center</i>
</label>
<label class="btn btn-outline btn-sm">
<input autocomplete="off" name="options3" type="radio">
<i class="material-icons">format_align_right</i>
</label>
<label class="btn btn-outline btn-sm">
<input autocomplete="off" name="options3" type="radio">
<i class="material-icons">format_align_justify</i>
</label>
</div>
Vertical variation is also supported
<div class="btn-group-vertical" data-toggle="buttons" role="group">
<button class="btn btn-outline btn-sm" disabled>
<i class="material-icons">attach_file</i>
</button>
<label class="btn btn-outline btn-sm active">
<input autocomplete="off" checked name="options4" type="checkbox">
<i class="material-icons">format_bold</i>
</label>
<label class="btn btn-outline btn-sm active">
<input autocomplete="off" checked name="options4" type="checkbox">
<i class="material-icons">format_italic</i>
</label>
<label class="btn btn-outline btn-sm active">
<input autocomplete="off" checked name="options4" type="checkbox">
<i class="material-icons">format_underlined</i>
</label>
<div class="btn-group" role="group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-outline btn-sm dropdown-toggle" data-toggle="dropdown" id="toggleBtnDrop3" type="button"><i class="material-icons">format_color_text</i></button>
<div aria-labelledby="toggleBtnDrop3" class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Colour 1</a>
<a class="dropdown-item" href="#">Colour 2</a>
<a class="dropdown-item" href="#">Colour 3</a>
</div>
</div>
<div class="btn-group" role="group">
<button aria-expanded="false" aria-haspopup="true" class="btn btn-outline btn-sm dropdown-toggle" data-toggle="dropdown" id="toggleBtnDrop4" type="button"><i class="material-icons">format_color_fill</i></button>
<div aria-labelledby="toggleBtnDrop4" class="dropdown-menu dropdown-menu-sm">
<a class="dropdown-item" href="#">Colour 1</a>
<a class="dropdown-item" href="#">Colour 2</a>
<a class="dropdown-item" href="#">Colour 3</a>
</div>
</div>
</div>
Usage
The type of button used should be suited to the context in which it appears.
Context | Button type |
---|---|
Always available | If your app requires actions to be persistent and readily available, you can use the floating action button. |
Dialogs | Use flat buttons in dialogs. |
Inline | Flat buttons or raised buttons can be used for inline buttons. |
Recommended button placement
Cards
Buttons are best placed on the left side of a card to increase their visibility. However, as cards have flexible layouts, buttons may be placed in a location suited to the content and context, while maintaining consistency within the product.
Forms
Button alignment on screen: Left.
Place the affirmative button on the left, the dismissive button on the right.
Standard dialogs
Button alignment on screen: right.
Place the affirmative button on the right, the dismissive button on the left.