A button clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
Button Types
There are five standard types of buttons:
- Floating action button: A circular material button that lifts and displays an ink reaction on press.
- Raised button: A typically rectangular material button that lifts and displays ink reactions on press.
- Flat button: A button made of ink that displays ink reactions on press but does not lift.
- Icon toggle button: a circular button with a transparent background that does not lift.
- Default button: a typically rectangular button that does not lift.
All the five button types are available in the four contextual classes (e.g., .btn-success), plus the default, accent and primary variants. (e.g., .btn-primary-dark)
Examples:
Floating Action Button
Raised Button
Flat Button
Icon Toggle
Default Button
HTML Code:
<div class="row"> <div class="col-sm-2 text-center"> <p>Floating Action Button</p> <button type="button" class="btn btn-floating-action btn-primary"><i class="material-icons">add</i></button> </div> <div class="col-sm-2 text-center"> <p>Raised Button</p> <button type="button" class="btn btn-raised btn-primary">Button</button> </div> <div class="col-sm-2 text-center"> <p>Flat Button</p> <button type="button" class="btn btn-flat btn-primary">Button</button> </div> <div class="col-sm-2 text-center"> <p>Icon Toggle</p> <button type="button" class="btn btn-icon-toggle btn-primary"><i class="material-icons">apps</i></button> </div> <div class="col-sm-2 text-center"> <p>Default Button</p> <button type="button" class="btn btn-primary">Button</button> </div> </div>
Button Sizes
Floating Action Button Examples:
LG
Normal
SM
XS
Raised Button Examples:
LG
Normal
SM
XS
Flat Button Examples:
LG
Normal
SM
XS
Icon Toggle Button Examples:
LG
Normal
SM
XS
Default Button Examples:
LG
Normal
SM
XS
HTML Code:
<div class="row"><div class="col-sm-3 text-center"> <p>LG</p> <button type="button" class="btn btn-lg btn-floating-action btn-primary"><i class="material-icons">add</i></button> </div> <div class="col-sm-3 text-center"> <p>Normal</p> <button type="button" class="btn btn-floating-action btn-primary"><i class="material-icons">add</i></button> </div> <div class="col-sm-3 text-center"> <p>SM</p> <button type="button" class="btn btn-sm btn-floating-action btn-primary"><i class="material-icons">add</i></button> </div> <div class="col-sm-3 text-center"> <p>XS</p> <button type="button" class="btn btn-xs btn-floating-action btn-primary"><i class="material-icons">add</i></button> </div> </div>
Button Colors
Raised Button Examples:
HTML Code:
<div class="row"> <div class="col-sm-3 text-center"> <p><button type="button" class="btn btn-raised btn-default-bright">Default</button></p> <p><button type="button" class="btn btn-raised btn-default-light">Default</button></p> <p><button type="button" class="btn btn-raised btn-default">Default</button></p> <p><button type="button" class="btn btn-raised btn-default-dark">Default</button></p> </div> <div class="col-sm-3 text-center"> <p><button type="button" class="btn btn-raised btn-primary-bright">Primary</button></p> <p><button type="button" class="btn btn-raised btn-primary-light">Primary</button></p> <p><button type="button" class="btn btn-raised btn-primary">Primary</button></p> <p><button type="button" class="btn btn-raised btn-primary-dark">Primary</button></p> </div> <div class="col-sm-3 text-center"> <p><button type="button" class="btn btn-raised btn-accent-bright">Accent</button></p> <p><button type="button" class="btn btn-raised btn-accent-light">Accent</button></p> <p><button type="button" class="btn btn-raised btn-accent">Accent</button></p> <p><button type="button" class="btn btn-raised btn-accent-dark">Accent</button></p> </div> <div class="col-sm-3 text-center"> <p><button type="button" class="btn btn-raised btn-success">Success</button></p> <p><button type="button" class="btn btn-raised btn-info">Info</button></p> <p><button type="button" class="btn btn-raised btn-warning">Warning</button></p> <p><button type="button" class="btn btn-raised btn-danger">Danger</button></p> </div> </div>
Flat Button Examples:
HTML Code:
<div class="row"> <div class="col-sm-3 text-center"> <p><button type="button" class="btn btn-flat btn-default-bright">Default</button></p> <p><button type="button" class="btn btn-flat btn-default-light">Default</button></p> <p><button type="button" class="btn btn-flat btn-default">Default</button></p> <p><button type="button" class="btn btn-flat btn-default-dark">Default</button></p> </div> <div class="col-sm-3 text-center"> <p><button type="button" class="btn btn-flat btn-primary-bright">Primary</button></p> <p><button type="button" class="btn btn-flat btn-primary-light">Primary</button></p> <p><button type="button" class="btn btn-flat btn-primary">Primary</button></p> <p><button type="button" class="btn btn-flat btn-primary-dark">Primary</button></p> </div> <div class="col-sm-3 text-center"> <p><button type="button" class="btn btn-flat btn-accent-bright">Accent</button></p> <p><button type="button" class="btn btn-flat btn-accent-light">Accent</button></p> <p><button type="button" class="btn btn-flat btn-accent">Accent</button></p> <p><button type="button" class="btn btn-flat btn-accent-dark">Accent</button></p> </div> <div class="col-sm-3 text-center"> <p><button type="button" class="btn btn-flat btn-success">Success</button></p> <p><button type="button" class="btn btn-flat btn-info">Info</button></p> <p><button type="button" class="btn btn-flat btn-warning">Warning</button></p> <p><button type="button" class="btn btn-flat btn-danger">Danger</button></p> </div> </div>