Reusable buttons, cards, and navigation
Build components around clear semantic roles. Use <button> for actions and <a> for navigation. Cards should preserve heading order, meaningful links, and a logical reading order. A hover state should not be the only indication that something is interactive.
For navigation, indicate the current page with appropriate semantics such as aria-current="page". For icon-only buttons, provide an accessible name. Do not add ARIA roles that duplicate native semantics without a specific reason.
Navigation with current-page semantics
<nav aria-label="Primary navigation" class="flex flex-wrap gap-2">
<a href="/overview" aria-current="page" class="rounded-lg bg-blue-50 px-3 py-2 text-sm font-semibold text-blue-800">Overview</a>
<a href="/tasks" class="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900">Tasks</a>
<a href="/settings" class="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900">Settings</a>
</nav>đź’ˇ The current page is conveyed through
aria-current, not only a background color. Links remain native navigation controls and are keyboard accessible by default.Key Takeaways
- Use buttons for actions and anchors for navigation.
- Give icon-only controls accessible names.
- Represent the current navigation item semantically.