Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Toggle Like Counter

ProNew

A like button that answers at once: a toggle with a stable name, an immediate count change, a rollback with an announced message when saving fails and a lock while saving.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

liked

count1

noun

Guide and examples

When to use it

Use this for likes, bookmarks and favourites where the server can fail and the interface should still feel instant.

Do not use it for votes that must be exact in real time, or where the count needs to be live from other people.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

ToggleLikeCounter

Prop	Type	Default	Description
`liked`	`boolean`	-	Whether the person liked it.
`count`	`number`	-	Total likes including the person's.
`onToggle`	`(liked: boolean) => Promise<void>`	-	Save; reject to roll back.
`noun`	`string`	`post`	Used in the accessible name.

Accessibility

The button is aria-pressed and its name stays "Like article", so the control is not re-announced as a different button after each press; the count is visual and the result is in a polite status.
A rejected save puts the state and the count back and says "Could not save your like. It was undone.".
The button is disabled while saving, so quick double presses cannot cross.

Keyboard

Key	Action
Enter or Space	toggles the like

Testing

The pattern ships a Testing Library test (toggle-like-counter.test.tsx) that covers the toggle state and count, optimistic updates, unliking, rollback and the saving lock.