Button Component
The ds-button component provides a customizable button with multiple visual variants.
Basic Usage
Section titled “Basic Usage”<ds-button variant="primary">Click Me</ds-button>Variants
Section titled “Variants”Primary
Section titled “Primary”The primary button style, used for main actions:
<ds-button variant="primary">Primary Button</ds-button>Secondary
Section titled “Secondary”Secondary button style for less prominent actions:
<ds-button variant="secondary">Secondary Button</ds-button>A text-only button without a background:
<ds-button variant="text">Text Button</ds-button>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("ds-button");button.addEventListener("click", (e) => { console.log("Button clicked!");});Examples
Section titled “Examples”Disabled State
Section titled “Disabled State”<ds-button variant="primary" disabled>Disabled Button</ds-button>With Icons
Section titled “With Icons”<ds-button variant="primary"> <icon-v1 name="check"></icon-v1> Save Changes</ds-button>Styling
Section titled “Styling”The button component respects your theme’s accent color and can be customized using CSS custom properties.