Badge

Import and live example#

One status/category marker whose text carries the meaning.

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<AeliqoBadgeElement>("aeliqo-badge", root);
		element.text = "Ready";
		element.tone = "success";
	}))(root);

Purpose#

A short status or category label with a supporting tone. The text carries the meaning; color only supports it.

When to use it#

• Marking a record as Draft, Paid, or another short status.
• Tagging a category beside a title or inside a list row.
• Labels where color can support but never replace the text.

When to use a different component#

• Use Alert for a message that needs attention or action.
• Use Text for ordinary copy that isn't a status marker.

Properties and defaults#

Tone is supplemental; the visible text remains the source of meaning.

Events#

• None; status is expressed by text

States and failure handling#

Relevant states:

• ready

Expected result: The marker communicates its text and optional visual tone.

Keyboard, focus, and accessibility#

Keyboard behavior:

• Not focusable by default

Exposed semantics:

• The component class does not set a native role or ARIA attribute; inspect its rendered children and host labels.

Responsive behavior#

Allow a row of badges to wrap when labels grow. Keep the status text visible; color alone does not carry its meaning.

Style hooks#

• Shadow parts: badge
• Varendo design tokens referenced: --aeliqo-color-border, --aeliqo-color-danger, --aeliqo-color-info, --aeliqo-color-success, --aeliqo-color-surface, --aeliqo-color-text, --aeliqo-color-warning, --aeliqo-control-border-width, --aeliqo-space-4, --aeliqo-space-8, --aeliqo-typography-font-size-caption, --aeliqo-typography-font-weight-semibold, --aeliqo-typography-line-height-tight

Related components#

• Text
• Alert

Generated TypeScript declaration#

export declare class AeliqoBadgeElement extends AeliqoFoundationElement {
    static readonly properties: {
        text: {
            type: StringConstructor;
        };
        tone: {
            type: StringConstructor;
        };
    };
    text: string;
    tone: AeliqoBadgeTone;
    protected render(): import("lit").TemplateResult<1>;
    static readonly styles: import("lit").CSSResult[];
}

Version#

This page documents the Varendo 0.6 component contract.