Skip to content
Fieldbook
Menu
Sign in
EN

Buttons

Counting follow chip

Counting follow chip: An outlined chip that pairs a label with a follower count, rolling the changed digits up through a masked window when latched and back down when released.

Using Counting follow chip

Counting follow chip uses the inline preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
accentcolor#FF4D8DNo additional limit in the metadata.
labeltextFollowUp to 16 characters
countnumber1284From 0 to 99999; step 1
compactbooleantrueNo additional limit in the metadata.
durationnumber450From 150 to 1200; step 25
Which frameworks are available for Counting follow chip?

Counting follow chip is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Counting follow chip depend on?

The React metadata lists these npm dependencies beyond React: motion, clsx.

What accessibility details are visible in Counting follow chip?

The React source for Counting follow chip includes: native elements (button); attributes and handlers (aria-hidden, aria-live, aria-pressed). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Counting follow chip handle reduced motion?

Counting follow chip reads the motion preference in its React source through useReducedMotion(). Preference-dependent expressions in index.tsx: reduceMotion ? { opacity: 0 } : { opacity: 0, y: dir === "up" ? "0.3em" : "-0.3em" }; reduceMotion ? { opacity: 0 } : { opacity: 1, y: dir === "up" ? "-0.95em" : "0.95em" }; reduceMotion ? { opacity: 0 } : { opacity: 1, y: dir === "up" ? "0.95em" : "-0.95em" }. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Captioned Like Button component, a Fieldbook UI component in Buttons.
2550Captioned Like ButtonButtonsAn icon-only heart button that reveals a caption rising from beneath on hover or focus, and fills solid with a quick overshoot when liked.
Still of the Follow count swipe component, a Fieldbook UI component in Buttons.
2492Follow count swipeButtonsAn outlined follow pill whose round accent badge slides to the far end on hover, painting a band that uncovers the follower count; clicking commits the follow with a stamp and bumps the count.
Still of the Key Turn Chip component, a Fieldbook UI component in Buttons.
2373Key Turn ChipButtonsA small filled chip whose key glyph jiggles like it is feeling for a lock on hover, then turns a quarter and unlocks on click.
Still of the Share toggle chip component, a Fieldbook UI component in Buttons.
2035Share toggle chipButtonsA recessed chip that flips from an invitation to a confirmed state on click, its glyph popping past full size before settling.
Still of the Travelling knob follow button component, a Fieldbook UI component in Buttons.
2488Travelling knob follow buttonButtonsAn outlined pill whose round knob rolls to the far end on hover, painting an accent track behind it and sliding a follower count into view; clicking keeps the followed state and bumps the count.
Still of the Arrow chip button component, a Fieldbook UI component in Buttons.
2640Arrow chip buttonButtonsA rounded action button with a glowing arrow chip docked in its right end that lifts off the page on hover with a hard offset shadow and sinks on press.