flowbite-react icon indicating copy to clipboard operation
flowbite-react copied to clipboard

Button as links do not have hover states

Open pangolingo opened this issue 1 year ago • 7 comments

  • [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

  1. Create 2 button components
  2. Set the as prop to a for the first button
  3. Leave the second button as-is (it should use a <button> element)
  4. 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.

pangolingo avatar Oct 24 '23 19:10 pangolingo