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>