@conectate/ct-button

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 */
}

Accessibility (a11y)

The component has proper focus states and keyboard navigation support. Use aria-label for improved accessibility when needed.

Follow Me

https://x.com/herberthobregon

Contributing

1. Fork the repo
2. Create a new branch: git checkout -b feature-branch
3. Commit your changes: git commit -m 'Add new feature'
4. Push to your branch: git push origin feature-branch
5. Open a pull request!

License

See LICENSE