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.
Raised
BUTTON cloudBUTTON cloudBUTTON
Copied!
content_copy
<a class="waves-effect waves-light btn">BUTTON</a>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>BUTTON</a>
<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>BUTTON</a>
Types
Button types according to semantic purpose.
PRIMARY SECONDARY/DEFAULT INFO SUCCESS WARNING DANGER LIGHT DARK DARK-LIGHT
Copied!
content_copy
<a class="waves-effect waves-light btn primary">PRIMARY</a>
<a class="waves-effect waves-light btn">SECONDARY/DEFAULT</a>
<a class="waves-effect waves-light btn info">INFO</a>
<a class="waves-effect waves-light btn success">SUCCESS</a>
<a class="waves-effect waves-light btn warning">WARNING</a>
<a class="waves-effect waves-light btn danger">DANGER</a>
<a class="waves-effect btn light">LIGHT</a>
<a class="waves-effect waves-light btn dark">DARK</a>
<a class="waves-effect btn dark-light">DARK-LIGHT</a>
Rounded
To make the button rounded just add rounded class.
Copied!
content_copy
<a class="waves-effect waves-light btn rounded primary">PRIMARY</a>
<a class="waves-effect waves-light btn rounded">SECONDARY/DEFAULT</a>
<a class="waves-effect waves-light btn rounded info">INFO</a>
<a class="waves-effect waves-light btn rounded success">SUCCESS</a>
<a class="waves-effect waves-light btn rounded warning">WARNING</a>
<a class="waves-effect waves-light btn rounded danger">DANGER</a>
<a class="waves-effect btn rounded light">LIGHT</a>
<a class="waves-effect waves-light btn roundeddark">DARK</a>
<a class="waves-effect btn dark-light rounded">DARK-LIGHT</a>
Soft
Flat buttons with background-color. Best used as action buttons inside tables.
Primary Secondary/Default Info Success Warning Danger Dark Light Dark-Light
Copied!
content_copy
<a class="waves-effect btn-soft primary">Primary</a>
<a class="waves-effect btn-soft">Secondary/Default</a>
<a class="waves-effect btn-soft info">Info</a>
<a class="waves-effect btn-soft success">Success</a>
<a class="waves-effect btn-soft warning">Warning</a>
<a class="waves-effect btn-soft danger">Danger</a>
<a class="waves-effect waves-light btn-soft dark">Dark</a>
<a class="waves-effect btn-soft light">Light</a>
<a class="waves-effect btn-soft dark-light">Dark-Light</a>
Outlined
Flat buttons with border outlined.
PRIMARY SECONDARY/DEFAULT INFO SUCCESS WARNING DANGER DARK LIGHT DARK-LIGHT
You can also use this button like a badge by adding the .as-badge
class.
Copied!
content_copy
<a class="btn-outlined primary">PRIMARY</a>
<a class="btn-outlined">SECONDARY/DEFAULT</a>
<a class="btn-outlined info">INFO</a>
<a class="btn-outlined success">SUCCESS</a>
<a class="btn-outlined warning">WARNING</a>
<a class="btn-outlined danger">DANGER</a>
<a class="btn-outlined light">LIGHT</a>
<a class="btn-outlined as-badge">SECONDARY/DEFAULT as a badge</a>
<a class="btn-outlined dark-light">DARK-LIGHT</a>
For thicker border, just add thick class.
Copied!
content_copy
<a class="btn-outlined thick primary">PRIMARY</a>
<a class="btn-outlined thick">SECONDARY/DEFAULT</a>
<a class="btn-outlined thick info">INFO</a>
<a class="btn-outlined thick success">SUCCESS</a>
<a class="btn-outlined thick warning">WARNING</a>
<a class="btn-outlined thick danger">DANGER</a>
<a class="btn-outlined thick dark">DARK
<a class="btn-outlined thick dark-light">DARK-LIGHT</a>
<a class="btn-outlined thick as-badge">SECONDARY/DEFAULT as a badge
<div class="card-panel black">
<a class="btn-outlined thick light">LIGHT</a>
</div>
Floating
Floating button, also known as FAB is a circle button typically found at the bottom right corner.
You can add the .square class to make the button shaped
squircle. And
then add .soft .<primary|success|etc..> class to use soft
colors which matches the Material Design 3 specification.
edit edit edit
close close close
Here are all the snippets for the soft type by semantic purpose.
chat edit check info close warning
Copied!
content_copy
<a class="btn-floating large waves-effect"><i class="material-icons">add</i></a>
<a class="btn-floating waves-effect"><i class="material-icons">edit</i></a>
<a class="btn-floating small waves-effect"><i class="material-icons">close</i></a>
<a class="btn-floating square large waves-effect"><i class="material-icons">add</i></a>
<a class="btn-floating square waves-effect"><i class="material-icons">edit</i></a>
<a class="btn-floating square small waves-effect"><i class="material-icons">close</i></a>
<a class="btn-floating soft primary square large waves-effect"><i class="material-icons">add</i></a>
<a class="btn-floating soft warning square waves-effect"><i class="material-icons">edit</i></a>
<a class="btn-floating soft danger square small waves-effect"><i class="material-icons">close</i></a>
<!-- Soft type by semantic purposes -->
<a class="btn-floating soft primary square large waves-effect"><i class="material-icons">chat</i></a>
<a class="btn-floating soft square large waves-effect"><i class="material-icons">edit</i></a>
<a class="btn-floating soft success square large waves-effect"><i class="material-icons">check</i></a>
<a class="btn-floating soft info square large waves-effect"><i class="material-icons">info</i></a>
<a class="btn-floating soft danger square large waves-effect"><i class="material-icons">close</i></a>
<a class="btn-floating soft warning square large waves-effect"><i class="material-icons">warning</i></a>
Floating Action Button
See the documentation on this page
Flat
Flat buttons are used to reduce excessive layering. For example, flat buttons are usually used for actions within a card or modal so there aren't too many overlapping shadows.
BUTTON
Copied!
content_copy
<a class="waves-effect waves-teal btn-flat">BUTTON</a>
Submit Button
When you use a button to submit a form, instead of using a input tag, use a button tag with a type submit
Copied!
content_copy
<button class="btn waves-effect waves-light" type="submit" name="action">SUBMIT
<i class="material-icons right">send</i>
</button>
Large
This button has a larger height for buttons that need more attention.
Please note that all sizes (large, small, and tiny) are all supported by other button types except the tiny size for floating action button.
BUTTON cloudBUTTON cloudBUTTON
Copied!
content_copy
<a class="waves-effect btn large">BUTTON</a>
<a class="waves-effect btn large"><i class="material-icons left">cloud</i>BUTTON</a>
<a class="waves-effect btn large"><i class="material-icons right">cloud</i>BUTTON</a>
Small
When mouse and keyboard are the primary input methods, this smaller button is useful for denser UI layouts.
BUTTON cloudBUTTON cloudBUTTON
Copied!
content_copy
<a class="waves-effect btn small">BUTTON</a>
<a class="waves-effect btn small"><i class="material-icons left">cloud</i>BUTTON</a>
<a class="waves-effect btn small"><i class="material-icons right">cloud</i>BUTTON</a>
Tiny
Optionally, you can also try the smallest size but it is not recommended for smaller screens.
BUTTON cloudBUTTON cloudBUTTON
Copied!
content_copy
<a class="waves-effect btn tiny">BUTTON</a>
<a class="waves-effect btn tiny"><i class="material-icons left">cloud</i>BUTTON</a>
<a class="waves-effect btn tiny"><i class="material-icons right">cloud</i>BUTTON</a>