Vincent Morneau
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
Component Name: BUTTON
Template: Text
Template OptionValue(s)Comments
Use DefaultYes
TypeRaised
Wave EffectLight
Outlined
The outlined button is like a raised button, with transparent background and borders instead.
Flat
Flat buttons are usually used within elements that already have depth like cards or modals.
Selected Template Options
Component Name: BUTTON5
Template: Text
Template OptionValue(s)Comments
Use DefaultYes
TypeFlat
Wave EffectRed
Large
Selected Template Options
Component Name: BUTTON6
Template: Text
Template OptionValue(s)Comments
Use DefaultYes
TypeRaised
SizeLarge
Wave EffectLight
Floating 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
Component Name: BUTTON_FAB
Template: Floating Action Button
Template OptionValue(s)Comments
Use DefaultYes
SizeLarge
Wave EffectLight
PositionFixed - Bottom Right
Horizontal FAB
Selected Template Options
Component Name: BUTTON_FAB_OPTION1_2
Template: Icon
Template OptionValue(s)Comments
Use DefaultYes
TypeRaised
Background ColorRed
Wave EffectLight
Click to Toggle FAB
Selected Template Options
Component Name: BUTTON_FAB_OPTION2_2_1
Template: Icon
Template OptionValue(s)Comments
Use DefaultYes
TypeRaised
Background ColorYellow
Wave EffectLight
FAB to Toolbar
To use FAB Toolbar, ensure your buttons templates are set to HOT.
Selected Template Options
Component Name: BUTTON_FAB_OPTION1_2_1_1
Template: Icon
Template OptionValue(s)Comments
Use DefaultYes
TypeRaised
Wave EffectLight
Disabled
Selected Template Options
Component Name: BUTTON9
Template: Text
Template OptionValue(s)Comments
Use DefaultYes
TypeRaised
Wave EffectLight
Full Column Width
 
 
 
Selected Template Options
Component Name: BUTTON10_1
Template: Text with Icon
Template OptionValue(s)Comments
Use DefaultYes
Full Column WidthYesThis makes the button to be 100% of the width of it's container.
TypeRaised
Wave EffectLight
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
Inline Buttons
Pulse
Selected Template Options
Component Name: BUTTON11
Template: Floating Action Button
Template OptionValue(s)Comments
Use DefaultYes
PulseYesDraw attention to your buttons with this subtle but captivating effect.
SizeLarge
Wave EffectLight
PositionInside the Parent
DirectionTopDirection FAB menu opens. Can be 'top', 'right', 'bottom', 'left'
Open BehaviorHoverDetermines if the FAB opens using Hover or Click