EccUtilsDesignButton Component
Overview
The ecc-utils-design-button component provides a versatile, stylable button that can be used for various actions. It offers multiple variants, sizes, and a disabled state.
This component is built with Lit and Tailwind CSS, making it lightweight and easy to integrate with any design system.
Usage
Button Variants
This example demonstrates the different visual styles available for the button.
Button Sizes
This example shows the different sizes the button can take.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | The visual style of the button. |
size | "default" | "sm" | "lg" | "icon" | "default" | The size of the button. |
disabled | boolean | false | When true, disables the button. |
variant
Controls the visual style of the button to indicate its purpose.
<EccUtilsDesignButton variant="destructive">Delete</EccUtilsDesignButton>size
Determines the button's size, affecting its padding and font size.
<EccUtilsDesignButton size="lg">Large Button</EccUtilsDesignButton>disabled
When true, the button is non-interactive and visually de-emphasized.
<EccUtilsDesignButton disabled={true}>Cannot Click</EccUtilsDesignButton>Events
This component does not emit any custom events. It forwards the standard HTML click event, which can be listened to directly.
<EccUtilsDesignButton
onClick={(event) => {
console.log('Button clicked!', event);
}}
/>
