feat(ui): render anchor variant as a link, not a button
The SuedeButton wrapper was applying the same .suede-button styles
to both the <button> and <a> renderings of bits-ui's polymorphic
Button.Root. By design, an anchor acting as a button (e.g. a
'Subscribe' link that navigates to a checkout page) should look
like a button — but a literal <a href> link should look like a
link. Until now the two were visually indistinguishable.
Added a :global(.suede-button[href]) rule that overrides the
button styling when bits-ui renders an anchor (it sets the
href attribute on the underlying element):
background-color: transparent
color: var(--hue-blue-500)
padding-inline: 0
text-decoration: underline
text-decoration-thickness: from-font
text-underline-offset: 0.2em
plus a :hover variant that darkens the color to --hue-blue-600.
The existing :hover and :active rules are now scoped with
:not([href]) so they only apply to the button variant — without
that, their higher-specificity background-color: var(--hue-blue-600)
would have re-painted the link blue on hover, defeating the
transparent background.
The user also renamed the destructured class prop from `klass`
to `className` (React convention) and updated the
'With class override' story to pass `class="u:fs-1"` instead
of `u:fs-3`, so the demo now isolates the inline-style
background override (emerald) without compounding it with a
font-size change.
Verified via Playwright computed-style inspection on all 4 stories:
Primary bg=oklch blue, white text, no underline (button)
Disabled same blue, cursor=not-allowed (button)
As link bg=transparent, blue text, underlined (link!)
With class override bg=oklch emerald, white text, no underline (button, color override)
pnpm check still 0 errors / 0 warnings project-wide.
taurean.bryant.land