Button Component
Overview
Section titled “Overview”The button-v1 component provides a customizable button with multiple visual variants.
Basic Usage
Section titled “Basic Usage”<button-v1 variant="primary">Click Me</button-v1>Variants
Section titled “Variants”Primary
Section titled “Primary”The primary button style, used for main actions:
<button-v1 variant="primary">Primary Button</button-v1>Secondary
Section titled “Secondary”Secondary button style for less prominent actions:
<button-v1 variant="secondary">Secondary Button</button-v1>A text-only button without a background:
<button-v1 variant="text">Text Button</button-v1>Attributes
Section titled “Attributes”| Attribute | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'text' | 'primary' | Button style variant |
disabled | boolean | false | Whether the button is disabled |
Events
Section titled “Events”The button component emits standard button events:
const button = document.querySelector('button-v1');button.addEventListener('click', (e) => { console.log('Button clicked!');});Examples
Section titled “Examples”Disabled State
Section titled “Disabled State”<button-v1 variant="primary" disabled>Disabled Button</button-v1>With Icons
Section titled “With Icons”<button-v1 variant="primary"> <icon-v1 name="check"></icon-v1> Save Changes</button-v1>Styling
Section titled “Styling”The button component respects your theme’s accent color and can be customized using CSS custom properties.