cmds-component-button v0.0.1

cm-button

Creates a button or an anchor that looks like a button.

Usage

Install Package

npm i cmds-cm-button

Use as an Svelte Component

Import the component

import Element from 'cmds-cm-button';

Add the component

<cm-button atts>...your content</cm-button>

Tailwind styles will work as long as you add the package folder to the tailwind config

Use as a Custom Element API

Copy this code inside the head tag

<link rel="stylesheet" href="cmds-preset.css" />
<script src="cm-button.js" />

Use the custom element

<cm-button></cm-button>

To add regular HTML attributes use the atrs attribute with a JS object structure. All values should be serializable.

<cm-button atrs="key:value,...,keyN:vaule"></cm-button>

To use it in a JS file use

document.body.innerHTML = '<cm-button></cm-button>';

Custom element does not suppor external css classes

Attributes

1. tag: CMButtonSupportType;
2. shape: CMButtonShape = 'Regular';
3. theme: CMButtonTheme = 'Solid-Primary';
4. size: CMButtonSize = 'Default';
5. analyticEvent: string | undefined = undefined; If this attribute is included it will push an event to the dataLayer with analyticsEventData value
6. analyticEventData: unknown = undefined;

Events

1. click; Works only with button tag