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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user