Buttons

Arrow chip button

Arrow chip button: A 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.

Using Arrow chip button

Arrow chip button 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.

Control	Type	Default	Preview limits
`accent`	`color`	`#7C5CFF`	No additional limit in the metadata.
`label`	`text`	`Contact sales`	Up to 22 characters
`radius`	`number`	`14`	From 6 to 24; step 1
`chipGlow`	`number`	`10`	From 0 to 24; step 2
`offset`	`number`	`3`	From 0 to 8; step 1

Which frameworks are available for Arrow chip button?

Arrow chip button 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 Arrow chip button depend on?

The React metadata lists these npm dependencies beyond React: clsx, tailwind-merge.

What accessibility details are visible in Arrow chip button?

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

How does Arrow chip button handle reduced motion?

The source scan found no direct useReducedMotion() or matchMedia preference read in Arrow chip button's index.tsx. 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 Arrow wipe call to action component, a Fieldbook UI component in Buttons.

1629Arrow wipe call to actionButtonsA call to action whose darker plate wipes in from the left on hover while a tucked arrow slides out to meet the label, and pushes down a pixel when clicked.

Still of the Converging chevron button component, a Fieldbook UI component in Buttons.

2684Converging chevron buttonButtonsTwo arrow shaped plates fly in from opposite sides and meet in the middle of the button, sealing it shut behind the label.

Still of the Counting follow chip component, a Fieldbook UI component in Buttons.

2472Counting follow chipButtonsAn 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.

Still of the Dot matrix arrow button component, a Fieldbook UI component in Buttons.

2527Dot matrix arrow buttonButtonsA button drawn as rows of dots stepped into a rightward arrowhead that glides sideways and back in a slow loop while hovered or focused and compresses toward its point when pressed.

Still of the Elevated chip button component, a Fieldbook UI component in Buttons.

2534Elevated chip buttonButtonsA pale rounded chip resting on stacked soft shadows that tints toward the accent on hover and sinks onto a deeper shadow with an accent outline when pressed.

Still of the Gap stretch arrow button component, a Fieldbook UI component in Buttons.

2585Gap stretch arrow buttonButtonsA fixed width pill whose trailing arrow walks to the far edge on hover, stretching the gap after a stationary label, with a faint trail copy following a beat behind.