@conectate/ct-button

<ct-button>

Installation

npm install @conectate/ct-button

yarn add @conectate/ct-button

NOTE: Conectate Components are distributed as ES2020 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for Edge and IE11.

Example usage

Standard

<ct-button value="value1"></ct-button>
<ct-button shadow value="value2"></ct-button>
<ct-button raised value="value3"></ct-button>
<ct-button flat value="value4"></ct-button>
<ct-button light value="value5"></ct-button>
<ct-button disabled value="value5"></ct-button>

<script type="module">
	import '@conectate/ct-button';
</script>

API

Slots

None

Properties/Attributes

Name	Type	Default	Description
raised	boolean	false	Raised Style (primary color)
shadow	boolean	false	Shown with opaque black background.
flat	boolean	false	Shown with a primary color border
light	boolean	false	Shown with a primary color border
disabled	boolean	false	If true, Disable clicks

Methods

None

Events

Name	Detail	Description
value	{value : string}	Fired when the user modifies the ct-input value state from an input device interaction on this radio.

CSS Custom Properties

Custom property	Description	Default
--color-primary	Primary color	#00aeff
--dark-primary-color	Dark Primary color	#00aeff
--ct-button-box-shadow	Box-Shadow for hover	0 2px 16px 4px rgba(99, 188, 240, 0.45)
--ct-button-shadow-color	-	rgba(64, 117, 187, 0.1)