Button

Trigger one explicit action; native button semantics; disabled and pending never double-submit.

FamilyfoundationLicenseApache-2.0

StandaloneAvailable

Use the web element directly without the semantic runtime.

Semantic bindingAvailable

A registered presentation adapter can bind this component to host-owned meaning and state.

Automatic adaptationNo standard recipe

The standard recipe resolver does not select this component automatically.

Import and live example

One primary action with a host-owned save request.

Interactive preview requires JavaScript.

View the complete example source

import {registerAeliqoElements} from "@varendo/web";
import {
  AeliqoAvatarElement,
  AeliqoBadgeElement,
  AeliqoButtonElement,
  AeliqoGridElement,
  AeliqoHeadingElement,
  AeliqoIconButtonElement,
  AeliqoLinkElement,
  AeliqoScrollAreaElement,
  AeliqoSeparatorElement,
  AeliqoSplitPaneElement,
  AeliqoStackElement,
  AeliqoSurfaceElement,
  AeliqoTextElement,
} from "@varendo/web/foundation";



registerAeliqoElements();

const host = document.querySelector<HTMLElement>("#aeliqo-example") ?? (() => {
  const created = document.createElement("div");
  created.id = "aeliqo-example";
  (document.body ?? document.documentElement).append(created);
  return created;
})();

function createCatalogRoot(container: HTMLElement): HTMLElement {
  const root = document.createElement("div");
  root.dataset.catalogSourceRoot = "true";
  root.style.display = "grid";
  root.style.gap = "12px";
  container.append(root);
  return root;
}

function createCatalogElement<T extends HTMLElement>(tagName: string, container: HTMLElement): T {
  const element = document.createElement(tagName) as T;
  element.setAttribute("data-aeliqo-theme", "light");
  container.append(element);
  return element;
}

function appendSlottedText(root: HTMLElement, slot: string, textContent: string): void {
  const content = document.createElement("span");
  content.slot = slot;
  content.textContent = textContent;
  root.append(content);
}

const root = createCatalogRoot(host);
(((root) => {
		const element = createCatalogElement<AeliqoButtonElement>("aeliqo-button", root);
		element.label = "Save report";
		element.variant = "solid";
		element.type = "button";
	}))(root);

Purpose

A native button for one explicit action. It emits a cancellable action event; your app performs the work and clears pending.

When to use it

Submitting a form, saving a record, or confirming a step.
An action your app must be able to cancel before it runs.
Actions that must not double-submit while pending or disabled.

When to use a different component

Use Link when activation navigates to another page.
Use IconButton for a compact icon action with its own accessible name.

Properties and defaults

The host chooses the action type and pending state; the component never performs persistence.

Properties, ownership, and initial values
Property	Use and ownership	Declared type	Initial value
`disabled`	Prevents user interaction while keeping the control and its current value visible.	`boolean`	`false`
`pending`	Marks an action as in progress and prevents repeated activation until the host clears it.	`boolean`	`false`
`type`	Supplies type to the component as application-owned input.	`AeliqoActionType`	`'button'`
`name`	Provides the stable form or action name used by the host to identify this control.	`string`	`''`
`value`	Controls the current value. Apply accepted user proposals back to this property.	`string`	`''`
`label`	Provides the visible label and accessible name for the component.	`string`	`''`
`variant`	Selects one of the documented visual variants without changing the component contract.	`AeliqoButtonVariant`	`'solid'`
`size`	Selects the component size from its bounded visual variants.	`AeliqoButtonSize`	`'medium'`

Events

Events, payloads, timing, and application responsibilities
Event	Payload	Emitted	Application responsibility
`aeliqo-action`	`{source, action, type}`	After a user activates the button or link.	Authorize the action, perform the effect, and update pending or navigation state.

Events cross the component boundary as user proposals. Validate their detail and current authority before applying a business effect.

Listen for `aeliqo-action`

TypeScript example

const element = document.querySelector('aeliqo-button');<p>element?.addEventListener('aeliqo-action', (event) => {
  const proposal = (event as CustomEvent<unknown>).detail;
  // Validate the proposal, update host state, then assign controlled properties.
  applyProposal(proposal);
});

States and failure handling

Relevant states:

ready
disabled
pending

Expected result: A cancellable action proposal is emitted when the native button is activated.

Keyboard, focus, and accessibility

Keyboard behavior:

Tab
Enter
Space

Exposed semantics:

aria-busy
aria-hidden
button

Responsive behavior

Its target keeps the component minimum hit area. Give long action labels a full row in narrow forms and leave room for the focus outline.

Style hooks

Shadow parts: button, pending
Varendo design tokens referenced: --aeliqo-color-accent, --aeliqo-color-border, --aeliqo-color-danger, --aeliqo-color-muted, --aeliqo-color-on-accent, --aeliqo-color-surface, --aeliqo-control-border-width, --aeliqo-control-compact-target, --aeliqo-control-inline-padding, --aeliqo-control-min-target, --aeliqo-elevation-raised, --aeliqo-radius-medium, --aeliqo-space-16, --aeliqo-space-8, --aeliqo-typography-font-size-sm

Generated TypeScript declaration

View generated declaration

export declare class AeliqoButtonElement extends AeliqoActionElement {
    static readonly properties: {
        disabled: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        pending: {
            type: BooleanConstructor;
            reflect: boolean;
        };
        type: {
            type: StringConstructor;
        };
        name: {
            type: StringConstructor;
            reflect: boolean;
        };
        value: {
            type: StringConstructor;
        };
        label: {
            type: StringConstructor;
        };
        variant: {
            type: StringConstructor;
        };
        size: {
            type: StringConstructor;
        };
    };
    label: string;
    variant: AeliqoButtonVariant;
    size: AeliqoButtonSize;
    type: AeliqoActionType;
    protected render(): import("lit").TemplateResult<1>;
    static readonly styles: import("lit").CSSResult[];
}

Version

This page documents the Varendo 0.6 component contract.

Import and live example#

Purpose#

When to use it#

When to use a different component#

Properties and defaults#

Events#

Listen for aeliqo-action

States and failure handling#

Keyboard, focus, and accessibility#

Responsive behavior#

Style hooks#

Related components#

Generated TypeScript declaration#

Version#