Buttons

			
<button class="btn material-btn">Button</button>
<button class="btn material-btn material-btn_primary">Button</button>
<button class="btn material-btn material-btn_success">Button</button>
<button class="btn material-btn material-btn_info">Button</button>
<button class="btn material-btn material-btn_warning">Button</button>
<button class="btn material-btn material-btn_danger">Button</button>

			
		

Buttons sizing

			
<button class="btn material-btn material-btn_lg">Large button</button>
<button class="btn material-btn material-btn_primary">Middle button</button>
<button class="btn material-btn material-btn_sm material-btn_success">Small button</button>
<button class="btn material-btn material-btn_xs material-btn_info">Extra small button</button>
			
		

Buttons disabled state

			
<button class="btn material-btn" disabled >Disabled button</button>
<button class="btn material-btn material-btn_primary" disabled >primary</button>
<button class="btn material-btn material-btn_success" disabled >success</button>
<button class="btn material-btn material-btn_info" disabled >info</button>
<button class="btn material-btn material-btn_warning" disabled >warning</button>
<button class="btn material-btn material-btn_danger" disabled >danger</button>
			
		

Button groups

			
<div class="btn-group" role="group" aria-label="Basic example">
 <button type="button" class="btn material-btn">Left</button>
 <button type="button" class="btn material-btn">Middle</button>
 <button type="button" class="btn material-btn">Right</button>
</div>
			
		
			
<div class="btn-group" role="group" aria-label="Basic example">
 <button type="button" class="btn material-btn material-btn_primary">Left</button>
 <button type="button" class="btn material-btn material-btn_primary">Middle</button>
 <button type="button" class="btn material-btn material-btn_primary">Right</button>
</div>
			
		
			
<div class="btn-group" role="group" aria-label="Basic example">
 <button type="button" class="btn material-btn material-btn_success">Left</button>
 <button type="button" class="btn material-btn material-btn_success">Middle</button>
 <button type="button" class="btn material-btn material-btn_success">Right</button>
</div>
			
		
			
<div class="btn-group" role="group" aria-label="Basic example">
 <button type="button" class="btn material-btn material-btn_info">Left</button>
 <button type="button" class="btn material-btn material-btn_info">Middle</button>
 <button type="button" class="btn material-btn material-btn_info">Right</button>
</div>
			
		
			
<div class="btn-group" role="group" aria-label="Basic example">
 <button type="button" class="btn material-btn material-btn_warning">Left</button>
 <button type="button" class="btn material-btn material-btn_warning">Middle</button>
 <button type="button" class="btn material-btn material-btn_warning">Right</button>
</div>
			
		
			
<div class="btn-group" role="group" aria-label="Basic example">
 <button type="button" class="btn material-btn material-btn_danger">Left</button>
 <button type="button" class="btn material-btn material-btn_danger">Middle</button>
 <button type="button" class="btn material-btn material-btn_danger">Right</button>
</div>
			
		
			
<div class="bs-example" data-example-id="button-group-sizing">
 <div class="btn-group material-btn_group material-btn-group_lg">
  <button type="button" class="btn material-btn">Left</button>
  <button type="button" class="btn material-btn">Middle</button>
  <button type="button" class="btn material-btn">Right</button>
 </div>
 <div class="btn-group material-btn_group">
  <button type="button" class="btn material-btn material-btn_primary">Left</button>
  <button type="button" class="btn material-btn material-btn_primary">Middle</button>
  <button type="button" class="btn material-btn material-btn_primary">Right</button>
 </div>
 <div class="btn-group material-btn material-btn_group_sm_group">
  <button type="button" class="btn material-btn material-btn_warning">Left</button>
  <button type="button" class="btn material-btn material-btn_warning">Middle</button>
  <button type="button" class="btn material-btn material-btn_warning">Right</button>
 </div>
 <div class="btn-group material-btn_group material-btn_group_xs">
  <button type="button" class="btn material-btn">Left</button>
  <button type="button" class="btn material-btn">Middle</button>
  <button type="button" class="btn material-btn">Right</button>
 </div>
</div>
			
		
			
<div class="btn-group material-btn-group">
 <button class="dropdown-toggle material-dropdown-btn material-btn" data-toggle="dropdown">Default<span class="caret material-btn__caret"></span></button>
 <ul class="dropdown-menu material-dropdown-menu" role="menu">
  <li><a href="#" class="material-dropdown-menu__link">Action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Another action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Something else here</a></li>
  <li class="divider material-dropdown__divider"></li>
  <li><a href="#" class="material-dropdown-menu__link">Separated link</a></li>
 </ul>
</div>
			
		
			
<div class="btn-group material-btn-group">
 <button class="dropdown-toggle material-dropdown-btn material-btn material-btn_primary" data-toggle="dropdown">Primary<span class="caret material-btn__caret"></span></button>
 <ul class="dropdown-menu material-dropdown-menu material-dropdown-menu_primary" role="menu">
  <li><a href="#" class="material-dropdown-menu__link">Action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Another action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Something else here</a></li>
  <li class="divider material-dropdown__divider"></li>
  <li><a href="#" class="material-dropdown-menu__link">Separated link</a></li>
 </ul>
</div>
			
		
			
<div class="btn-group material-btn-group">
 <button class="dropdown-toggle material-dropdown-btn material-btn material-btn_success" data-toggle="dropdown">Success<span class="caret material-btn__caret"></span></button>
 <ul class="dropdown-menu material-dropdown-menu material-dropdown-menu_success" role="menu">
  <li><a href="#" class="material-dropdown-menu__link">Action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Another action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Something else here</a></li>
  <li class="divider material-dropdown__divider"></li>
  <li><a href="#" class="material-dropdown-menu__link">Separated link</a></li>
 </ul>
</div>
			
		
			
<div class="btn-group material-btn-group">
 <button class="dropdown-toggle material-dropdown-btn material-btn material-btn_info" data-toggle="dropdown">Info<span class="caret material-btn__caret"></span></button>
 <ul class="dropdown-menu material-dropdown-menu material-dropdown-menu_info" role="menu">
  <li><a href="#" class="material-dropdown-menu__link">Action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Another action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Something else here</a></li>
  <li class="divider material-dropdown__divider"></li>
  <li><a href="#" class="material-dropdown-menu__link">Separated link</a></li>
 </ul>
</div>
			
		
			
<div class="btn-group material-btn-group">
 <button class="dropdown-toggle material-dropdown-btn material-btn material-btn_warning" data-toggle="dropdown">Warning<span class="caret material-btn__caret"></span></button>
 <ul class="dropdown-menu material-dropdown-menu material-dropdown-menu_warning" role="menu">
  <li><a href="#" class="material-dropdown-menu__link">Action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Another action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Something else here</a></li>
  <li class="divider material-dropdown__divider"></li>
  <li><a href="#" class="material-dropdown-menu__link">Separated link</a></li>
 </ul>
</div>
			
		
			
<div class="btn-group material-btn-group">
 <button class="dropdown-toggle material-dropdown-btn material-btn material-btn_danger" data-toggle="dropdown">Danger<span class="caret material-btn__caret"></span></button>
 <ul class="dropdown-menu material-dropdown-menu material-dropdown-menu_danger" role="menu">
  <li><a href="#" class="material-dropdown-menu__link">Action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Another action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Something else here</a></li>
  <li class="divider material-dropdown__divider"></li>
  <li><a href="#" class="material-dropdown-menu__link">Separated link</a></li>
 </ul>
</div>
			
		
			
<div class="btn-group material-btn-group">
 <button class="dropdown-toggle material-dropdown-btn material-btn material-btn_primary material-btn_lg" data-toggle="dropdown">Primary<span class="caret material-btn__caret"></span></button>
 <ul class="dropdown-menu material-dropdown-menu material-dropdown-menu_primary">
  <li><a href="#" class="material-dropdown-menu__link">Action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Another action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Something else here</a></li>
  <li class="divider material-dropdown__divider"></li>
  <li><a href="#" class="material-dropdown-menu__link">Separated link</a></li>
 </ul>
</div>
			
		
			
<div class="btn-group material-btn-group">
 <button class="dropdown-toggle material-dropdown-btn material-btn material-btn_primary" data-toggle="dropdown">Primary<span class="caret material-btn__caret"></span></button>
 <ul class="dropdown-menu material-dropdown-menu material-dropdown-menu_primary">
  <li><a href="#" class="material-dropdown-menu__link">Action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Another action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Something else here</a></li>
  <li class="divider material-dropdown__divider"></li>
  <li><a href="#" class="material-dropdown-menu__link">Separated link</a></li>
 </ul>
</div>
			
		
			
<div class="btn-group material-btn-group">
 <button class="dropdown-toggle material-dropdown-btn material-btn material-btn_primary material-btn_sm" data-toggle="dropdown">Primary<span class="caret material-btn__caret"></span></button>
 <ul class="dropdown-menu material-dropdown-menu material-dropdown-menu_primary">
  <li><a href="#" class="material-dropdown-menu__link">Action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Another action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Something else here</a></li>
  <li class="divider material-dropdown__divider"></li>
  <li><a href="#" class="material-dropdown-menu__link">Separated link</a></li>
 </ul>
</div>
			
		
			
<div class="btn-group material-btn-group">
 <button class="dropdown-toggle material-dropdown-btn material-btn material-btn_primary material-btn_xs" data-toggle="dropdown">Primary<span class="caret material-btn__caret"></span></button>
 <ul class="dropdown-menu material-dropdown-menu material-dropdown-menu_primary">
  <li><a href="#" class="material-dropdown-menu__link">Action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Another action</a></li>
  <li><a href="#" class="material-dropdown-menu__link">Something else here</a></li>
  <li class="divider material-dropdown__divider"></li>
  <li><a href="#" class="material-dropdown-menu__link">Separated link</a></li>
 </ul>
</div>