Button

Button

The <stx-button> component is a customizable button with support for variants, sizes, and states.

Usage

<stx-button>Default Button</stx-button>
<stx-button variant="primary">Primary</stx-button>
<stx-button variant="outline">Outline</stx-button>
<stx-button variant="ghost">Ghost</stx-button>

Properties

Property	Type	Default	Description
variant	'default' | 'primary' | 'outline' | 'ghost'	'default'	Visual style variant
size	'sm' | 'md' | 'lg'	'md'	Button size
disabled	boolean	false	Disables the button

Sizes

<stx-button size="sm">Small</stx-button>
<stx-button size="md">Medium</stx-button>
<stx-button size="lg">Large</stx-button>

Events

The button dispatches standard click events:

document.querySelector('stx-button').addEventListener('click', (e) => {
  console.log('Button clicked!');
});

Styling

The button uses CSS custom properties for theming:

stx-button {
  --stx-button-bg: #3b82f6;
  --stx-button-color: white;
  --stx-button-radius: 0.5rem;
}