feat(button): add link variant and polymorphic <a> rendering

When :href is provided, the button renders as <a> instead of <button>,
enabling navigation links with full button styling.

New :link variant renders as a minimal text link (underlined, accent
color, no background/padding) — works as both <button> and <a>.

CSS includes reset styles for a.btn (removes default link decoration)
and preserves underline for a.btn-link.
This commit is contained in:
Florian Schroedl
2026-03-03 17:04:41 +01:00
parent 6a3fee34c4
commit e4ee7b750e
10 changed files with 1118 additions and 43 deletions

View File

@@ -46,6 +46,28 @@
filter: brightness(1.1);
}
.btn-link {
background: transparent;
color: var(--accent);
text-decoration: underline;
text-underline-offset: var(--size-1);
padding: 0;
border: none;
}
.btn-link:hover:not(:disabled) {
filter: brightness(1.2);
}
/* Link buttons rendered as <a> need reset styles */
a.btn {
text-decoration: none;
color: inherit;
}
a.btn-link {
text-decoration: underline;
color: var(--accent);
}
.btn-sm {
padding: var(--size-1) var(--size-2);
font-size: var(--font-xs);