Showcase index
Actions
Forms
Feedback
Content
Buttons and labels
The matrix of ten intents per variant, across the four families: button, chip, badge and pill.
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
Chips
The interactive label, for filtering and removal: hover and focus exist because the click is real.
.es-chip--filled
.es-chip--soft
.es-chip--outline
Badges
The static label for counts and states: no hover and no focus, because it is not interactive.
.es-badge--soft
.es-badge--filled
Pills
The static rounded label, the middle ground between badge and chip.
.es-pill--soft
.es-pill--outline