Button

Preview

<EsaButton>Get started</EsaButton>

Colors

Eight semantic colors. ai maps to the copper AI-context palette; ghost is neutral and transparent.

<EsaButton color="primary">Primary</EsaButton>
<EsaButton color="secondary">Secondary</EsaButton>
<EsaButton color="danger">Danger</EsaButton>
<EsaButton color="success">Success</EsaButton>
<EsaButton color="warning">Warning</EsaButton>
<EsaButton color="info">Info</EsaButton>
<EsaButton color="ai">AI</EsaButton>
<EsaButton color="ghost">Ghost</EsaButton>

Appearances

The appearance axis is independent of color — any color renders as fill, outline, or dashed.

<EsaButton color="danger" appearance="fill">Fill</EsaButton>
<EsaButton color="danger" appearance="outline">Outline</EsaButton>
<EsaButton color="danger" appearance="dashed">Dashed</EsaButton>

Active (toggle)

Set active for a pressed/selected look (and aria-pressed) — the basis for toggle buttons.

<EsaButton appearance="outline">Default</EsaButton>
<EsaButton appearance="outline" active>Active</EsaButton>

Sizes

<EsaButton size="xs">Extra small</EsaButton>
<EsaButton size="sm">Small</EsaButton>
<EsaButton size="md">Medium</EsaButton>
<EsaButton size="lg">Large</EsaButton>

States

<EsaButton icon="arrow-right">With icon</EsaButton>
<EsaButton loading>Loading</EsaButton>
<EsaButton disabled>Disabled</EsaButton>
<EsaButton iconOnly icon="plus" aria-label="Add" />

API

Accessibility

• Renders a native <button> — keyboard and screen-reader behavior come for free.
• Visible focus ring via --focus-ring-* tokens (2px, offset).
• active sets aria-pressed; iconOnly buttons require an aria-label.
• loading keeps the label in the DOM (visually hidden) so width doesn't jump and the name persists.
• warning fill uses dark text for contrast on the amber background.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.