Is the current hover behavior of the default button variant (nova/lyra styling) intended.

[jimmyorpheus]

Is the current hover behavior of the default button variant (nova/lyra styling) intended?

The current tailwindcss definition is restricted by an arbitrary variant [a]...
"default: ... [a]:hover:bg-primary/80"

...and compiles to the following css definition...

.\[a\]\:hover\:bg-primary\/80 {
    &:is(a) {
        &:hover {
            @media (hover: hover) {
                background-color: color-mix(in oklab, var(--primary) 80%, transparent);
            }
        }
    }
}

...meaning that the bg-primary/80 hover style is only applied to <a>-tag elements.

Since the asChild-prop of the Button component is set to false by default, the Button component will render as a native html button...

const Comp = asChild ? Slot.Root : 'button';

...meaning that the hover style is not applied by default. It is only applied if your Button passes a true asChild-prop and wraps an <a>-tag child element, as it might be derived from a next/link component.

This described hover behavior could be intentional, e.g. to reduce the visual distraction that would be caused by the hover effect. But then, what about the hover effects that are still caused by the other button variants?

e.g. outline: "... hover:bg-muted ... dark:hover:bg-input/50",

And as mentioned, even the default variant applies the hovering effect in such cases, where an <a>-tag is passed as child - when the button is used for routing. Furthermore, since buttons use the default cursor by default there remains no visual indication that a default button variant with a default setting of asChild=false is a clickable element, except it's shape perhaps.

Therefore my question: Is the current hover behavior, that the hover style is not applied by default, intended? Or would it be fine to have the arbitrary selector [a] removed:

default: "... hover:bg-primary/80"

I understand that all the styling is anyway adjustable and meant to be customized. This is why I am only asking about the out-of-the-box defaults as the come with Nova or Lyra styling selected.

[rajputomsingh]

doesn’t look intentional more like a side effect of the [a] selector.

Right now, hover:bg-primary/80 only applies when rendered as <a> via asChild, but the default <button> gets no hover state. That’s inconsistent with other variants (outline, etc.) and removes basic affordance.

I’d suggest removing [a] and applying hover universally:

default: "... hover:bg-primary/80"

Keeps behavior consistent and predictable across button and asChild.

[jimmyorpheus]

I've created PR #10422 to remove the [a] restriction for the hover effect.