Skip to content

feat: add aura-button class to style anchors as buttons #11771

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mstahv wants to merge 2 commits into
base: main
Choose a base branch
from
+281 −26
Open

feat: add aura-button class to style anchors as buttons #11771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d7a0fcb
feat: add aura-button class to style anchors as buttons
mstahv May 18, 2026
ed4e931
lumo version
mstahv May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions dev/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,19 @@
Edit
<vaadin-tooltip slot="tooltip" text="Click to edit"></vaadin-tooltip>
</vaadin-button>

<div class="section">
<p class="heading">Anchors styled as buttons (Aura: <code>.aura-button</code>)</p>
<a class="aura-button" href="#">Default link</a>
<a class="aura-button" theme="primary" href="#">Primary link</a>
<a class="aura-button" theme="tertiary" href="#">Tertiary link</a>
</div>

<div class="section">
<p class="heading">Anchors styled as buttons (Lumo: <code>.lumo-button</code>)</p>
<a class="lumo-button" href="#">Default link</a>
<a class="lumo-button" theme="primary" href="#">Primary link</a>
<a class="lumo-button" theme="tertiary" href="#">Tertiary link</a>
</div>
</body>
</html>
124 changes: 98 additions & 26 deletions packages/aura/src/components/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,50 @@
--vaadin-button-shadow: var(--aura-shadow-xs);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
/*
Base styles for the .aura-button class, which lets a plain element (typically <a>)
look like a vaadin-button. The corresponding rules for vaadin-button itself are
applied inside its shadow root via the base button styles. See issue #1803.
*/
.aura-button {

@web-padawan web-padawan May 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: this would in theory make it possible to slap .aura-button to any element, which we shouldn't encourage. Should we instead explicitly use a.aura-button to limit this to links?

display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
gap: var(--vaadin-button-gap, 0 var(--vaadin-gap-s));
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
user-select: none;
cursor: var(--vaadin-clickable-cursor);
box-sizing: border-box;
flex-shrink: 0;
height: var(--vaadin-button-height, fit-content);
margin: var(--vaadin-button-margin, 0);
padding: var(--vaadin-button-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container));
font-family: var(--vaadin-button-font-family, inherit);
font-size: var(--vaadin-button-font-size, inherit);
line-height: var(--vaadin-button-line-height, inherit);
font-weight: var(--vaadin-button-font-weight, 500);
color: var(--vaadin-button-text-color, var(--vaadin-text-color));

@web-padawan web-padawan May 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: these properties seem to be copied as is from button base styles. This is problematic as e.g. color is overridden below to var(--vaadin-button-text-color, var(--aura-accent-text-color)) - no need to duplicate it here, same for background. We need to only list what's actually needed.

background: var(--vaadin-button-background, var(--vaadin-background-container));
background-origin: border-box;
border: var(--vaadin-button-border-width, 1px) solid
var(--vaadin-button-border-color, var(--vaadin-border-color-secondary));
border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
touch-action: manipulation;
}

.aura-button:focus-visible {
outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
}

.aura-button[theme~='tertiary'] {
background: transparent;
border-color: transparent;
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit, .aura-button) {
transition: scale 180ms;
position: relative;
--_background: var(--aura-accent-surface) padding-box;
Expand All @@ -14,23 +57,33 @@ vaadin-drawer-toggle[theme~='tertiary']::part(icon) {
opacity: 0.6;
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
:not([theme~='tertiary'])
) {
:is(
vaadin-button,
vaadin-upload-button,
vaadin-menu-bar-button,
vaadin-drawer-toggle,
vaadin-crud-edit,
.aura-button
):where(:not([theme~='tertiary'])) {
--aura-surface-level: 4;
--aura-surface-opacity: 0.5;
box-shadow: var(--vaadin-button-shadow);
}

/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~='primary'], [theme~='tertiary']) {
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit, .aura-button):not([theme~='primary'], [theme~='tertiary']) {
background: var(--vaadin-button-background, var(--_background));
border-color: var(--vaadin-button-border-color, var(--aura-accent-border-color));
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
:not([theme~='primary'])
) {
:is(
vaadin-button,
vaadin-upload-button,
vaadin-menu-bar-button,
vaadin-drawer-toggle,
vaadin-crud-edit,
.aura-button
):where(:not([theme~='primary'])) {
outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
}

Expand All @@ -39,28 +92,33 @@ Increase padding, but only for buttons that don't have an icon in the default sl
Buttons that place an icon in the default slot are assumed to be icon-only buttons.
*/
/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-crud-edit):not(:has(> :is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-crud-edit, .aura-button):not(:has(> :is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar):not([slot]))) {
--vaadin-button-padding: var(--vaadin-padding-block-container)
var(--vaadin-padding-m);
}

/* Decrease padding when an icon is placed in the prefix or suffix slot */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button):has(
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, .aura-button):has(
> [slot='prefix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)
) {
padding-inline-start: var(--vaadin-padding-s);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button):has(
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, .aura-button):has(
> [slot='suffix']:is(vaadin-icon, svg, i[class*='fa-'], vaadin-avatar)
),
vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
padding-inline-end: var(--vaadin-padding-s);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(
[theme~='primary']
) {
:is(
vaadin-button,
vaadin-upload-button,
vaadin-menu-bar-button,
vaadin-drawer-toggle,
vaadin-crud-edit,
.aura-button
):where([theme~='primary']) {
outline-offset: 2px;
--vaadin-button-font-weight: var(--aura-font-weight-semibold);
--vaadin-button-text-color: var(--aura-accent-contrast-color);
Expand All @@ -73,9 +131,14 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
color: color-mix(in srgb, currentColor 50%, transparent);
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(
[disabled]
)::before {
:is(
vaadin-button,
vaadin-upload-button,
vaadin-menu-bar-button,
vaadin-drawer-toggle,
vaadin-crud-edit,
.aura-button
):not([disabled])::before {
content: '';
position: absolute;
inset: calc(var(--vaadin-button-border-width, 1px) * -1);
Expand All @@ -89,48 +152,57 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
}

@supports (color: hsl(0 0 0)) {
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not(
[disabled]
)::before {
:is(
vaadin-button,
vaadin-upload-button,
vaadin-menu-bar-button,
vaadin-drawer-toggle,
vaadin-crud-edit,
.aura-button
):not([disabled])::before {
background-color: oklch(from currentColor calc(l + 0.4 - c) c h / calc(1 - l / 2));
}
}

@media (any-hover: hover) {
/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):hover:not([disabled], [active])::before {
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit, .aura-button):hover:not([disabled], [active])::before {
opacity: 0.03;
}

/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary']:hover:not([disabled], [active])::before {
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit, .aura-button)[theme~='primary']:hover:not([disabled], [active])::before {
opacity: 0.12;
}
}

@media (min-resolution: 2x) {
/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button[first-visible][last-visible], vaadin-drawer-toggle)[active]:not([disabled], [aria-disabled='true']) {
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button[first-visible][last-visible], vaadin-drawer-toggle)[active]:not([disabled], [aria-disabled='true']),
.aura-button:active:not([aria-disabled='true']) {
scale: 0.98;
transition-duration: 50ms;
}
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not(
[disabled]
) {
),
.aura-button:active {
box-shadow: none;
}

:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[active]:not(
[disabled]
)::before {
)::before,
.aura-button:active::before {
transition-duration: 0s;
opacity: 0.08;
background: oklch(from currentColor min(c, 1 - l + c) calc(c * 0.9) h);
}

/* prettier-ignore */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'][active]:not([disabled])::before {
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit)[theme~='primary'][active]:not([disabled])::before,
.aura-button[theme~='primary']:active::before {
opacity: 0.16;
}
Loading
Loading