Buttons

The ten-intent matrix per variant, the three sizes, the button with an icon and the button that is a link.

Buttons

The system's two axes: the intent sets the color through local tokens and the variant only consumes them. One row per variant, with the ten intents.

.es-btn--filled

.es-btn--gradient

.es-btn--outline

.es-btn--glass

.es-btn--ghost

.es-btn--sm, padrão, .es-btn--lg

:disabled

Button with an icon

The icon goes in the same slot as the text and the gap comes from the class. There is no `icon` prop: it would only take the icons the component knows about, and every derived site brings its own.

<echo-button><icon-add /> …</echo-button>

aria-label

Button that is a link

When the action NAVIGATES, the element is an anchor and not a button: only an anchor opens in a new tab, shows up in the context menu and is announced as a destination. The look is the same class.

.es-btn on <a> / <nuxt-link>

Read the docs The group’s site

For AI agents

This page’s specification

A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.

Download: Buttons Download the full guide Read in the browser

/agents/buttons.md