This project is a demonstration of a highly polished, interactive, and reusable button component built entirely in Rive. The goal was to create a primary call-to-action (CTA) button that is production-ready, fully customizable, and optimized for modern UI design, including light and dark modes.

This Rive component was designed to be a versatile, production-ready asset. Here’s a breakdown of its core features.

Designed for modern interfaces, the button includes built-in 'Light' and 'Dark' modes. This transition is achieved by simply switching between dedicated Rive artboards, making it straightforward to implement in any application.

The component is built to be 100% responsive. As demonstrated in the screen recording, it fluidly scales and adapts its layout when the Rive artboard size is changed. This ensures a pixel-perfect look on any device or container, from a narrow mobile screen to a wide desktop view.

A key feature of this component is its deep customizability, covering both its content and appearance. This component's text label is linked to a Rive text input. As shown in the recording, the copy can be updated dynamically at runtime. This makes the button truly reusable for any call-to-action (CTA)—whether it's "Submit," "Learn More," or "Add to Cart."

Beyond the text, every color aspect of the button is customizable and can be changed directly within Rive. This flexibility makes it easy for any team to adapt the button to match their specific brand identity or design system.

To provide clear and satisfying user feedback, the component features a robust 'pressed' state built with a Rive State Machine. When clicked or tapped, the button provides immediate visual confirmation with a subtle scale and glow animation. This micro-interaction is crucial for usability and adds a significant layer of polish.

Technically, this interaction is powered by a state machine with 4 distinct layers. It utilizes 2 listeners that track the pointer's (mouse or finger) location. This allows the 'pressed' state animation to originate exactly from the point of contact, creating a realistic and dynamic feedback loop.

Additionally, 1 event is fired on click, reporting the action to the host application (letting it know "I was pressed!"). This setup ensures the button is not only visually impressive but also functionally robust and easy to integrate.