Buttons
There are 3 main button types described in material design. All buttons can have a wave effect. Click on a button to see.
Raised
The raised button is a standard button that signify actions and seek to give depth to a mostly flat page.
Selected Template Options

BUTTON
Template: Standard

Template OptionValue(s)Comments
Use DefaultYes
Icon FloatLeftOnly applies if your button has an icon
TypeRaised
Wave EffectLight
Floating
The floating circular action button is meant for very important functions.
Selected Template Options

BUTTON4
Template: Standard

Template OptionValue(s)Comments
Use DefaultYes
Icon FloatLeftOnly applies if your button has an icon
SizeLarge
TypeFloating
Wave EffectLight
Flat
Flat buttons are usually used within elements that already have depth like cards or modals.
Selected Template Options

BUTTON5
Template: Standard

Template OptionValue(s)Comments
Use DefaultYes
Icon FloatLeftOnly applies if your button has an icon
TypeFlat
Wave EffectRed
Large
Selected Template Options

BUTTON6
Template: Standard

Template OptionValue(s)Comments
Use DefaultYes
Icon FloatLeftOnly applies if your button has an icon
SizeLarge
TypeRaised
Wave EffectLight
Fixed Action Button
If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the page.
Standard FAB
Selected Template Options

BUTTON_FAB
Template: Fixed Action Button

Template OptionValue(s)Comments
Use DefaultYes
PositionFixed - Bottom Right
Horizontal FAB
Selected Template Options

BUTTON_FAB_2
Template: Fixed Action Button

Template OptionValue(s)Comments
Use DefaultYes
HorizontalYes
PositionInside the Parent
Click to Toggle FAB
Selected Template Options

BUTTON_FAB_2_1
Template: Fixed Action Button

Template OptionValue(s)Comments
Use DefaultYes
Click to ToggleYes
HorizontalYes
PositionInside the Parent
FAB to Toolbar
To use FAB Toolbar, ensure your buttons templates are set to HOT.
Selected Template Options

BUTTON_FAB_2_1_1
Template: Fixed Action Button

Template OptionValue(s)Comments
Use DefaultYes
ToolbarYes
PositionInside the Parent
Disabled
Selected Template Options

BUTTON9
Template: Standard

Template OptionValue(s)Comments
Use DefaultYes
Icon FloatLeftOnly applies if your button has an icon
TypeRaised
Wave EffectNone
Full Column Width
 
Selected Template Options

BUTTON10
Template: Standard

Template OptionValue(s)Comments
Use DefaultYes
Full Column WidthYesThis makes the button to be 100% of the width of it's container.
TypeRaised
Wave EffectNone
Icon FloatLeftOnly applies if your button has an icon
Grid AttributeValue
New GridNo
New Grid RowYes
New Grid ColumnNo
Grid Column4
Grid Column Span6
Grid Column Span6
Pulse
Selected Template Options

BUTTON11
Template: Standard

Template OptionValue(s)Comments
Use DefaultYes
PulseYesDraw attention to your buttons with this subtle but captivating effect.
TypeFloating
SizeLarge
Wave EffectLight
Icon FloatLeftOnly applies if your button has an icon