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