IconButton

Import and live example#

One compact action with an accessible label and an icon slot.

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<AeliqoIconButtonElement>("aeliqo-icon-button", root);
		element.label = "Open details";
		appendSlottedText(element, "icon", "⋯");
	}))(root);

Purpose#

A compact icon button with a native target and a text name from label. Your app owns the emitted action and its pending state.

When to use it#

• Toolbar or row actions where space is tight.
• Icon actions that still need an accessible name via label.
• Repeated compact actions, like row-level edit or delete.

When to use a different component#

• Use Button when the action needs a visible text label.
• Use Tooltip to add a hint; it cannot replace the label name.

Properties and defaults#

The label is required for the icon-only affordance; the host owns the action.

Events#

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

Listen for aeliqo-action

const element = document.querySelector('aeliqo-icon-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: The icon action remains keyboard reachable and emits the typed action proposal.

Keyboard, focus, and accessibility#

Keyboard behavior:

• Tab
• Enter
• Space

Exposed semantics:

• aria-busy
• aria-hidden
• aria-label
• button

Responsive behavior#

The icon target keeps its minimum hit area. Separate adjacent actions so their targets and focus outlines remain distinct.

Style hooks#

• Shadow parts: button, icon, pending
• Varendo design tokens referenced: --aeliqo-color-border, --aeliqo-color-surface, --aeliqo-color-text, --aeliqo-control-border-width, --aeliqo-control-compact-target, --aeliqo-control-min-target, --aeliqo-space-4, --aeliqo-space-8, --aeliqo-typography-font-size-sm

Related components#

• Button
• Tooltip

Generated TypeScript declaration#

export declare class AeliqoIconButtonElement 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;
        };
        size: {
            type: StringConstructor;
        };
    };
    label: string;
    size: AeliqoIconButtonSize;
    type: AeliqoActionType;
    protected render(): import("lit").TemplateResult<1>;
    static readonly styles: import("lit").CSSResult[];
}

Version#

This page documents the Varendo 0.6 component contract.