flowbite-react
flowbite-react copied to clipboard
Button as links do not have hover states
- [x] I have searched the Issues to see if this bug has already been reported
- [x] I have tested the latest version
Using version 0.6.4.
Steps to reproduce
- Create 2 button components
- Set the
as
prop toa
for the first button - Leave the second button as-is (it should use a
<button>
element) - Hover your cursor over each button
import { Button } from "flowbite-react";
<Button>Click this button</Button>
<Button as="a" href="#">Click this link</Button>
Current behavior
The standard button shows a hover state. The link button is unchanged (no hover state).
Expected behavior
Both buttons show a hover state
Context
We are using Next.js, and are using <button>
s, <a>
s and <Link>
s in various places. The hover state only works for buttons. We would it expect it to work for anchors too.
This may have been caused by this PR: https://github.com/themesberg/flowbite-react/pull/830
The Tailwind enabled
modifier only works on buttons and inputs - not on links which don't have an enabled
state.