Arrow

Updated: May 4, 2025

A decorative arrow component that animates when a specified trigger element is hovered. It's useful for creating visual cues and enhancing interactive elements with subtle animations.

Arrow

Simple usage

Customized usage

<Row id="arrow-trigger-1">
  Simple usage
  <Arrow trigger="#arrow-trigger-1" scale={1} />
</Row>
<Row id="arrow-trigger-2">
  Customized usage
  <Arrow trigger="#arrow-trigger-2" color="onSolid" scale={1.2} />
</Row>

API reference

Prop	Type	Default
triggerrequired CSS selector for the element it points from. It follows that element's hover.	string	—
scale Arrow size, as a multiplier.	number	0.8
color Whether it draws for a background or a solid surface.	onBackgroundonSolid	onBackground
style	React.CSSProperties	—
className	string	—
…and every FlexProps prop	inherited	—

Usage Notes

The trigger prop must be a valid CSS selector (e.g., #element-id, .element-class)
The arrow will animate when the user hovers over the element specified by the trigger selector
Use the scale prop to adjust the size of the arrow to fit your design
The color prop allows you to choose between styles optimized for light or dark backgrounds

ComponentsAnimation

ComponentsArrowNavigation

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club