A pill toggle for like, save, bookmark or star. The icon fills from the bottom with a spring pop and sparks, and the count rolls digit by digit like an odometer.
Mira Kovac
@mirak · 2h
Shipped the new onboarding today. Activation is up 18% in the first week.
npx shadcn@latest add https://hyperblur.dev/r/button-toggle-count.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-toggle-count.tsx.
import { ButtonToggleCount } from "@/components/hyperblur/button-toggle-count"
<ButtonToggleCount kind="like" count={1284} onPressedChange={(on) => save(on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| kind | "like" | "save" | "bookmark" | "star" | "like" | Built-in icon, default accent and default label. |
| count | number | 1284 | Count while not pressed. Pressing adds one. |
| pressed | boolean | undefined | Controlled pressed state. |
| defaultPressed | boolean | false | Initial pressed state when uncontrolled. |
| onPressedChange | (pressed: boolean) => void | undefined | Called when the user toggles. |
| label | string | from kind | Accessible name, read together with the count. |
| accent | string | from kind | Fill, spark and tint color. |
| icon | ReactNode | undefined | Custom icon that replaces the built-in outline and fill. |
| compact | boolean | false | Smaller pill, and counts from 10,000 shown as 12.4k. |
| disabled | boolean | false | Disables interaction and dims the control. |