ButtonsNew
Like Button
A chunky button with a heart. On hover the heart fills and beats; a press keeps the like. Screen readers hear the state.
Customize
heartColor
background
ringColor
textColor
Based on loud-walrus-26 by LilaRest (MIT license) · Terms of use
More in Pro
View allProps
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| label | string | "Like" | Button text. |
| defaultLiked | boolean | false | Whether the button starts liked. |
| liked | boolean | — | Controlled state. Without it the button keeps its own. |
| onLikedChange | (liked: boolean) => void | — | Called with the new state after a press. |
| heartColor | string | "#fafafa" | Heart color. |
| background | string | "#1f1f1f" | Button background. |
| ringColor | string | "#2e2e2e" | Color of the thick ring. |
| textColor | string | "#a3a3a3" | Text color. |
| className | string | — | Classes for the wrapper. |
Dependencies
2 required packages
npm install clsx tailwind-merge