@conectate/ct-button NPM

A customizable button web component with various styles and configurations.

Installation

Install via npm or pnpm:

pnpm i @conectate/ct-button
# or
npm i @conectate/ct-button

Basic Usage

<ct-button>Click me</ct-button>
<ct-button raised>Raised Button</ct-button>
<ct-button shadow>Shadow Button</ct-button>
<ct-button flat>Flat Button</ct-button>
<ct-button light>Light Button</ct-button>
<ct-button disabled>Disabled Button</ct-button>

Usage with ES Modules

If you are using frameworks like Lit, React, or Vue, import the component:

import "@conectate/ct-button";

Example with LitElement (TypeScript)

import { LitElement, customElement, html } from "lit";
import "@conectate/ct-button";

@customElement("my-element")
class MyElement extends LitElement {
	render() {
		return html`
			<ct-button raised @click=${this.handleClick}>Click Me</ct-button>
		`;
	}

	handleClick() {
		console.log("Button clicked!");
	}
}

Variants

The button comes in several variants:

Default: Standard button
Raised: Primary colored button
Shadow: Button with opaque black background
Flat: Button with a primary color border
Light: Button with a primary color border (alternative style)

Components

This package includes:

ct-button: Standard button component
ct-button-menu: Button with dropdown menu functionality
ct-button-split: Split button with primary action and dropdown

Properties

Property	Attribute	Type	Default	Description
`raised`	`raised`	`boolean`	`false`	Raised Style (primary color)
`shadow`	`shadow`	`boolean`	`false`	Shown with opaque black background.
`flat`	`flat`	`boolean`	`false`	Shown with a primary color border
`light`	`light`	`boolean`	`false`	Shown with a primary color border
`disabled`	`disabled`	`boolean`	`false`	If `true`, Disable clicks
`type`	`type`	`string`	`"button"`	Button type (button, submit, reset)

Slots

Default slot: Main content of the button
prefix: Content placed above the main content
suffix: Content placed below the main content

CSS Variables

You can customize the component using the following CSS variables:

ct-button {
	--color-primary: #00aeff; /* Primary color */
	--dark-primary-color: #00aeff; /* Dark Primary color */
	--ct-button-box-shadow: 0 2px 16px 4px rgba(99, 188, 240, 0.45); /* Box-Shadow for hover */
	--ct-button-shadow-color: rgba(64, 117, 187, 0.1); /* Shadow color */
	--ct-button-radius: 26px; /* Button border radius */
	--ct-button-padding: 0.4em 1em; /* Button padding */
}