ars-button — Demo

About

A native-button-based web component with 4 variants (primary, secondary, danger, ghost), 3 sizes (sm, md, lg), loading spinner, disabled state, and prefix/suffix icon slots. Fires ars-button:click with { variant } detail.

Variants

Primary

Secondary

Danger

Ghost

<ars-button variant="primary">Primary</ars-button>
<ars-button variant="secondary">Secondary</ars-button>
<ars-button variant="danger">Danger</ars-button>
<ars-button variant="ghost">Ghost</ars-button>

Sizes

Small

Medium

Large

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

Loading State

Loading…

Processing

Deleting

<ars-button loading>Loading…</ars-button>

Disabled State

Disabled Primary

Disabled Secondary

Disabled Danger

Disabled Ghost

<ars-button disabled>Disabled</ars-button>

Prefix & Suffix Slots

➕ Add Item

Delete 🗑️

📤 Upload ↗

<ars-button variant="primary">
  <span slot="prefix">➕</span>
  Add Item
</ars-button>

Button Types

type="button"

type="submit"

type="reset"

<ars-button type="submit">Submit</ars-button>

Interactive — Toggle Loading

Click to simulate async

Event Monitor

[ready] Listening for ars-button:click…

Theme Toggle

Usage

<ars-button variant="danger" size="lg">Delete</ars-button>

<script type="module">
  import { ArsButton } from 'ars-web-components';
  document.querySelector('ars-button')
    .addEventListener('ars-button:click', (e) => {
      console.log('Variant:', e.detail.variant);
    });
</script>