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