Flat buttons and raised buttons are the most commonly used types.
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 .
Flat
Primary
Secondary
Danger
Info
Success
Warning
Dark
Light
<button class= "btn btn-flat" type= "button" > Flat</button>
<button class= "btn btn-flat-primary my-1" type= "button" > Primary</button>
<button class= "btn btn-flat-secondary my-1" type= "button" > Secondary</button>
<button class= "btn btn-flat-danger my-1" type= "button" > Danger</button>
<button class= "btn btn-flat-info my-1" type= "button" > Info</button>
<button class= "btn btn-flat-success my-1" type= "button" > Success</button>
<button class= "btn btn-flat-warning my-1" type= "button" > Warning</button>
<button class= "btn btn-flat-dark my-1" type= "button" > Dark</button>
<button class= "btn btn-flat-light my-1" type= "button" > Light</button>
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 .
Raised
Primary
Secondary
Danger
Info
Success
Warning
Dark
Light
<button class= "btn my-1" type= "button" > Raised</button>
<button class= "btn btn-primary my-1" type= "button" > Primary</button>
<button class= "btn btn-secondary my-1" type= "button" > Secondary</button>
<button class= "btn btn-danger my-1" type= "button" > Danger</button>
<button class= "btn btn-info my-1" type= "button" > Info</button>
<button class= "btn btn-success my-1" type= "button" > Success</button>
<button class= "btn btn-warning my-1" type= "button" > Warning</button>
<button class= "btn btn-dark my-1" type= "button" > Dark</button>
<button class= "btn btn-light my-1" type= "button" > Light</button>
A floating action button represents the primary action in an application, it is used for a promoted action.
add
<button class= "btn btn-float" type= "button" ><i class= "material-icons" > add</i></button>
Colours
add
add
add
add
add
add
add
add
<button class= "btn btn-float btn-primary my-1" type= "button" ><i class= "material-icons" > add</i></button>
<button class= "btn btn-float btn-secondary my-1" type= "button" ><i class= "material-icons" > add</i></button>
<button class= "btn btn-float btn-danger my-1" type= "button" ><i class= "material-icons" > add</i></button>
<button class= "btn btn-float btn-info my-1" type= "button" ><i class= "material-icons" > add</i></button>
<button class= "btn btn-float btn-success my-1" type= "button" ><i class= "material-icons" > add</i></button>
<button class= "btn btn-float btn-warning my-1" type= "button" ><i class= "material-icons" > add</i></button>
<button class= "btn btn-float btn-dark my-1" type= "button" ><i class= "material-icons" > add</i></button>
<button class= "btn btn-float btn-light my-1" type= "button" ><i class= "material-icons" > add</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.
add
<button class= "btn btn-float btn-sm" type= "button" ><i class= "material-icons" > add</i></button>
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.
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.
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.