Button Styling: Gotcha and Best Practices

Gotcha: Using a <div> as a Button

It's common to see <div> elements styled to look like buttons. However, this approach has significant accessibility and usability drawbacks.

(Div) Looks like a Button

This <div> above is styled with bg-blue-500 text-white py-2 px-4 rounded . While visually similar, it is not keyboard focusable by default, and screen readers will not announce it as an interactive "button" element. This makes it inaccessible to many users. Try tabbing to it – you likely can't without extra (non-Tailwind) JavaScript or ARIA attributes.

Correct Semantic Approaches

For accessible and functional buttons, use proper HTML elements:

1. Using <button> (for actions):

This is a semantic <button> . It's inherently focusable, works with keyboard (Enter/Space), and is announced correctly by assistive technologies. Ideal for form submissions or triggering JavaScript actions.

2. Using <a> (for navigation, styled as a button):

Styled <a> Tag (Link)

This is an <a> (anchor) tag styled as a button. Use this when the "button" should navigate the user to a different URL. It's also focusable and announced as a link.

Key Classes Applied to Correct Elements: bg-color , text-color , py-2 , px-4 , rounded .