@scada/button

A customizable SCADA button web component built with native JavaScript.

Installation

npm install @scada/button

Usage

<!-- Import the web component -->
<script type="module">
  import '@scada/button';
</script>

<!-- Use the button -->
<scada-button variant="primary" icon="start">Start Process</scada-button>

Attributes

• type: Button type ('button' | 'submit') - default: 'button'
• variant: Button style ('primary' | 'success' | 'danger' | 'warning') - default: 'primary'
• icon: Built-in icon name ('start' | 'stop' | 'alert' | 'settings' | 'submit')
• icon-url: URL to an external SVG icon
• size: Button size ('small' | 'medium' | 'large') - default: 'medium'
• disabled: Disable the button
• loading: Show loading spinner

Events

• scada-click: Fired when button is clicked
• scada-submit: Fired when a submit button triggers form submission

Examples

<!-- Primary button with icon -->
<scada-button variant="primary" icon="start">Start</scada-button>

<!-- Submit button -->
<scada-button type="submit" icon="submit">Submit Form</scada-button>

<!-- Loading state -->
<scada-button loading>Processing...</scada-button>

<!-- External icon -->
<scada-button icon-url="https://example.com/icon.svg">Custom Icon</scada-button>

License

MIT