EOS UIButton
A framework-agnostic Web Component button with semantic variants, CSS variable theming, and cross-framework integration.
Import
import '@eosjs/ui/button';Introduction
Button is a framework-agnostic Web Component aligned with the EOS semantic color and sizing system. It works with React, Vue, Angular, and plain HTML without a framework adapter.
Basic Usage
Variants
Button supports semantic colors, visual variants, three sizes, loading, disabled, and icon-only states. The example groups these axes separately so each color and state can be compared without duplicating every combination.
Variants
API
Generated from custom-elements.json for eos-button.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | — | — | — |
aria-keyshortcuts | — | — | — |
aria-pressed | — | — | — |
color | — | — | — |
disabled | — | — | — |
full-width | — | — | — |
icon-only | — | — | — |
loading | — | — | — |
name | — | — | — |
size | — | — | — |
type | — | — | — |
value | — | — | — |
variant | — | — | — |
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
color | default | primary | secondary | success | warning | danger | primary | Semantic color |
variant | solid | bordered | light | flat | ghost | primary | secondary | tertiary | outline | danger | dangerSoft | solid | Visual treatment |
size | sm | md | lg | md | Button size: 32/36/40px high |
disabled | boolean | false | Prevent interaction |
loading | boolean | false | Show progress and prevent interaction |
icon-only | boolean | false | Use a square button at the selected size |
full-width | boolean | false | Stretch the button to the host width |
type | button | submit | reset | button | Native button type |
aria-label | string | - | Accessible name for icon-only buttons |
Events
| Event | When it fires | Event object |
|---|---|---|
click | The button is activated | Native MouseEvent |
Slots
Icons are passed through named slots; the component does not depend on a framework icon library:
<eos-button>
<svg slot="start" viewBox="0 0 16 16" aria-hidden="true"><!-- icon --></svg>
Save
<svg slot="end" viewBox="0 0 16 16" aria-hidden="true"><!-- icon --></svg>
</eos-button>
<eos-button icon-only aria-label="Settings">
<svg slot="start" viewBox="0 0 16 16" aria-hidden="true"><!-- icon --></svg>
</eos-button>Framework integration
React
import { useEffect, useRef } from 'react';
import '@eosjs/ui';
export function MyButton() {
const ref = useRef<HTMLElement>(null);
useEffect(() => {
const element = ref.current;
const onClick = (event: Event) => {
console.log('clicked:', event.type);
};
element?.addEventListener('click', onClick);
return () => element?.removeEventListener('click', onClick);
}, []);
return <eos-button ref={ref}>Click me</eos-button>;
}Vue 3
<template>
<eos-button @click="handleClick">Click me</eos-button>
</template>
<script setup>
import '@eosjs/ui';
function handleClick(event) {
console.log('clicked:', event.type);
}
</script>Angular
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@eosjs/ui';
@Component({
selector: 'app-button',
template: '<eos-button (click)="onClick($event)">Click me</eos-button>',
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ButtonComponent {
onClick(event: MouseEvent) {
console.log('clicked:', event.type);
}
}Native HTML
<script type="module">
import '@eosjs/ui';
document.querySelector('eos-button').addEventListener('click', (event) => {
console.log('clicked:', event.type);
});
</script>
<eos-button>Click me</eos-button>CSS custom properties
The component consumes EOS semantic variables. Define them on the theme root or the eos-button host to provide Light/Dark values; the component keeps its implementation details inside Shadow DOM.
/* Define theme values centrally on :root or [data-theme]. */
:root {
/* Figma semantic tokens: slash is represented by a hyphen in CSS. */
--accent-accent: #006fee;
--accent-accent-foreground: #fcfcfc;
--accent-accent-hover: #3592f9;
--default-default: #ebebec;
--default-default-foreground: #18181b;
--surface-surface-secondary: #efeff0;
--border: #dedee0;
--focus-ring: #006fee;
}