@conectate/ct-button NPM

`<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)`