Gotcha: Forgetting Hover/Focus States
A common gotcha is creating an outlined button that looks fine initially but lacks clear visual feedback on hover or focus. This makes the button feel unresponsive and can be an accessibility issue.
Example of Gotcha (Poor Feedback):
Notice the lack of clear change on hover or when focused (try tabbing to it).
Corrected Example (Good Feedback):
This button has clear hover and focus states, improving UX and accessibility.
Key Takeaway for Gotcha:
Always define distinct
hover:
and
focus:
(or
focus-visible:
) states for your buttons, especially outlined ones. This ensures users know the button is interactive and currently active/focused.
While
bg-transparent
is important, the most frequent usability issue with outlined buttons is neglecting responsive hover/focus styles.