About
ars-button provides a styled, accessible button with variant, size, and state support. Uses a native <button> inside Shadow DOM for full keyboard/focus accessibility.
ars-button
Variants
<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
<ars-button size="sm">Small</ars-button>
<ars-button size="md">Medium</ars-button>
<ars-button size="lg">Large</ars-button>
States
<ars-button disabled>Disabled</ars-button>
<ars-button loading>Loading</ars-button>
Slots (Prefix / Suffix)
<ars-button>
<span slot="prefix">★</span>
With Prefix
</ars-button>
Event Log
Click any button above and watch events appear below.
Listening for ars-button:click events...
About
ars-toggle is a switch/toggle control for boolean state.
Uses role="switch" with aria-checked for accessibility.
Keyboard navigable with Space and Enter.
ars-toggle
Basic
<ars-toggle></ars-toggle>
<ars-toggle label="Enable notifications"></ars-toggle>
<ars-toggle label="Dark mode" checked></ars-toggle>
Label Positions
<ars-toggle label="Label at start" label-position="start"></ars-toggle>
<ars-toggle label="Label at end" label-position="end"></ars-toggle>
States
<ars-toggle label="Disabled (off)" disabled></ars-toggle>
<ars-toggle label="Disabled (on)" disabled checked></ars-toggle>
Event Log
Toggle any switch above and watch events appear below.
Listening for ars-toggle:change events...
Live Binding
This toggle switches between light and dark theme:
Theme Toggle
Usage
<script type="module">
import {
ArsButton,
initializeArsWebComponents,
getArsWebComponentsDefaultAdapter,
registerArsWebComponents,
} from 'ars-web-components';
registerArsWebComponents();
initializeArsWebComponents({
designAdapter: getArsWebComponentsDefaultAdapter('light')
});
</script>
<ars-button variant="primary" size="md">Click Me</ars-button>
<ars-button variant="danger" disabled>Can't Touch This</ars-button>
<script>
document.querySelector('ars-button')
.addEventListener('ars-button:click', (e) => {
console.log('Clicked:', e.detail.variant);
});
</script>