scu-button

Button 
<scu-button label='Submit'></scu-button>
Outline Button 
<scu-button label='Submit' outline></scu-button>
Grey Button 
<scu-button label='Submit' grey></scu-button>
Link Button 
<scu-button label='Submit' link></scu-button>
Icon Button 
<scu-button label='Submit' icon="relationship"></scu-button>
Icon Button Outline 
<scu-button label='Submit' icon="relationship" outline></scu-button>
Icon Only 
<scu-button label='Submit' icon="relationship" icon_only></scu-button>
Outline Icon Only 
<scu-button label='Submit' icon="relationship" icon_only outline></scu-button>
Icon Button - Icon Variations 
<scu-button label='Submit' icon="relationship"></scu-button>
<scu-button label='Submit' icon="insights"></scu-button>
<scu-button label='Submit' icon="error"></scu-button>
Disabled Button 
<scu-button label='Submit' disabled></scu-button>
<scu-button label='Submit' disabled outline></scu-button>
<scu-button label='Submit' disabled grey></scu-button>
<scu-button label='Submit' disabled link></scu-button>
<scu-button label='Submit' disabled icon="relationship"></scu-button>
<scu-button label='Submit' disabled icon="relationship" outline></scu-button>
<scu-button label='Submit' disabled icon="relationship" outline icon_only></scu-button>
Button without Label
A default should show up without the label set. 
<scu-button></scu-button>
<scu-button outline></scu-button>
<scu-button grey></scu-button>
<scu-button link></scu-button>
<scu-button icon="relationship"></scu-button>
<scu-button icon="relationship" outline></scu-button>
Button with a Long Label 
<scu-button label='A Really Long Label That Should Make Button Wide'></scu-button>
<scu-button label='A Really Long Label That Should Make Button Wide' outline></scu-button>
<scu-button label='A Really Long Label That Should Make Button Wide' grey></scu-button>
<scu-button label='A Really Long Label That Should Make Button Wide' link></scu-button>
<scu-button label='A Really Long Label That Should Make Button Wide' icon="relationship"></scu-button>
<scu-button label='A Really Long Label That Should Make Button Wide' icon="relationship" outline></scu-button>
Resized Button
The button should fit the width that you give it, but not the height ...that should stay autosized. 
<scu-button label='Submit' style='width: 300px;'></scu-button>
<scu-button label='Submit' outline style='width: 300px;'></scu-button>
<scu-button label='Submit' grey style='width: 300px;'></scu-button>
<scu-button label='Submit' link style='width: 300px;'></scu-button>
<scu-button label='Submit' icon="relationship" style='width: 300px;'></scu-button>
<scu-button label='Submit' icon="relationship" style='width: 300px;' outline></scu-button>

scu-button

what

Properties

Property Attribute Description Type Default
disabled disabled boolean false
grey grey boolean false
icon icon boolean | string false
icon_only icon_only boolean false
label label string "!No Label Sent!"
link link boolean false
outline outline boolean false
type type ButtonTypes.grey | ButtonTypes.link | ButtonTypes.outline | ButtonTypes.primary ButtonTypes.primary

Built with StencilJS