Usage

Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

Primary Warning Positive Attention

Website-themed default action button.

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.

Ghost Ghost Ghost Ghost

Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.

Previous Warning Positive Attention

It provides dimensionality to your UI along z-axis with clues of shadow.

Raised Raised Raised Raised

Smooth buttons for those eye-pleasing aesthetic look to your web app.

Smooth Smooth Smooth Smooth

Here's a bunch of buttons with the box-shadow effect

Primary Positive Ghost

Link buttons are typically used for less-pronounced actions, including those located in dialogs or in cards.

Touch here