Buttons edit

Button Types

There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.

Primary (default)

    
      content_copy
    
    
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">
  <span class="material-icons">favorite</span>Favorite
</button>
<button type="button" class="btn btn-primary">
  Delete<span class="material-icons">delete</span>
</button>
<button type="button" class="btn btn-primary btn-error">
  <span class="material-icons">favorite</span>Favorite
</button>
<button type="button" class="btn" disabled>
  Disabled
</button>
    
  

Text

    
      content_copy
    
    
<button type="button" class="btn btn-text">Button</button>
<button type="button" class="btn btn-text">
  <span class="material-icons">favorite</span>Favorite
</button>
<button type="button" class="btn btn-text">
  Delete<span class="material-icons">delete</span>
</button>
<button type="button" class="btn btn-text btn-error">Danger</button>
<button type="button" class="btn btn-text" disabled>Disabled</button>
    
  

Outlined

    
      content_copy
    
    
<button type="button" class="btn btn-outlined">Button</button>
<button type="button" class="btn btn-outlined">
  <span class="material-icons">favorite</span>Favorite
</button>
<button type="button" class="btn btn-outlined">
  Delete<span class="material-icons">delete</span>
</button>
<button type="button" class="btn btn-outlined btn-danger">Danger</button>
<button type="button" class="btn btn-outlined" disabled>Disabled</button>
    
  

Floating (icon) buttons

    
      content_copy
    
    
<button type="button" class="btn btn-floating btn-primary">
  <span class="material-icons">favorite</span>
</button>
<button type="button" class="btn btn-floating">
  <span class="material-icons">delete</span>
</button>
<button type="button" class="btn btn-floating btn-primary">
  <span class="material-icons">favorite</span>
</button>
<button type="button" class="btn btn-floating btn-primary">
  <span class="material-icons">delete</span>
</button>
<button type="button" class="btn btn-floating btn-error">
  <span class="material-icons">delete</span>
</button>
<button type="button" class="btn btn-floating" disabled>
  <span class="material-icons">home</span>
</button>
<button type="button" class="btn btn-floating btn-sm">
  <span class="material-icons">home</span>
</button>
    
  

Sizes

    
      content_copy
    
    
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary">Medium/Default</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>