Round icon buttons
Circular icon buttons with an accessible tooltip on hover and focus.
- Tailwind
- React
- CSS
- WordPress
Description
Each button has an accessible name (aria-label) echoed in a tooltip visible on hover and keyboard focus, without script. The hit area is 44 px for touch. Three tones are provided: neutral, accent and destructive.
Code
Loading the code…
In the same spirit

Split button with menu
Coming soonA primary action joined to a menu of secondary options.
- Tailwind
- React
- CSS
- WordPress

Raised button
FreeA chunky button that sinks under the finger, for primary actions.
- Tailwind
- React
- CSS
- WordPress

Gradient pill button
Coming soonA colorful pill crossed by a light sheen on hover.
- Tailwind
- React
- CSS
- WordPress

A text link whose underline draws from left to right on hover.
- Tailwind
- React
- CSS
- WordPress