Open experiment
Liquid favorite button
An expressive reaction control that combines a binary saved state with a visible community count. The heart fills like a liquid chamber, while state text and aria-pressed keep the interaction unambiguous.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<button class="cmp-liquid-favorite" type="button" aria-pressed="false">
<span class="cmp-liquid-favorite__heart" aria-hidden="true"><i></i><b>♥</b></span>
<span class="cmp-liquid-favorite__copy"
><strong>Save this idea</strong><small>Join <b data-count>248</b> collectors</small></span
>
<span class="cmp-liquid-favorite__ring" aria-hidden="true"></span>
</button>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The native button exposes pressed state and updated saved text.
- The visible count is supplementary rather than the only state cue.
- Reduced-motion mode removes liquid movement and the celebration ripple.
License: MIT License for open-source use, modification, and distribution.