How to Build an Interactive Toggle Button in Rive (Day / Night Mode)

Interactive UI elements are a big part of what makes modern products feel alive.

I wanted to walk through the thinking and structure behind building a Day / Night toggle button in Rive - from visual design, through animation, and all the way to real user interaction.

A toggle button might look simple. But it actually combines several core Rive concepts into one small component - and that's exactly why it's such a good learning example.

What Makes a Toggle Button a Great Rive Exercise

Here's what we're actually working with inside this one little component:

• Visual design and layout

• State Machines and transitions

• Animation timing and easing

• User interaction and logic

• Communication between components

Because of that, it's a perfect example for understanding how static designs turn into interactive systems in Rive.

If you're just getting started with Rive, or you've been doing basic animations and want to understand how interaction actually works under the hood - this is a great place to start.

Step 1: Design the Toggle

We start by designing the toggle itself using basic shapes in Rive's Design Mode:

• A rounded container that holds the toggle

• A movable knob that slides from left to right

• Text labels for the two states: Day and Night

At this stage, everything is purely visual. No animation, no logic. Just a clean, readable UI that will support interaction later.

One small but important decision here: grouping. The toggle knob is placed inside a group so it can be animated as a single unit later on. This makes the animation logic much cleaner. It's the kind of thing that seems minor, but saves a lot of headaches down the road when your State Machine gets more complex.

Step 2: Define States with a State Machine

Once the design is ready, we move into Animate Mode and define two states:

• Day (the default)

• Night

Each state describes how the toggle should look at rest:

• Where the knob is positioned

• Which label is highlighted

• Which visual elements are active

Here's the key: instead of animating inside the states themselves, we only define the end values. Each state is a snapshot of where things should be - not how they get there.

This keeps everything clean and predictable. The animation happens somewhere else.

Step 3: Animate the Transition

This is where the real magic happens.

The animation doesn't live inside the states. It lives on the transition between them.

Rather than snapping instantly from Day to Night, we add a transition duration and apply Cubic easing. This creates a smooth, natural movement that feels responsive and intentional.

This is one of those Rive concepts that changed how I think about interactive animation:

The animation lives on the transition, not inside the states.

Once I understood this, building complex interactions became a lot more manageable. You define what each state looks like, and then you control how the system moves between them. It scales really well as your project grows.

Step 4: Add Logic with a Boolean Input

To control which state is active, we introduce a Boolean Input called isNight.

• false = Day

• true = Night

The State Machine uses this input to decide which state should be active. Simple.

But what makes this powerful is that this input can be controlled from anywhere - from user interaction inside Rive, from code in your app, or from external data. It's the bridge between the animation system and the outside world.

Step 5: Make It Interactive with Listeners

At this point, the toggle animates between states. But it doesn't respond to clicks yet.

To fix that, we add two things:

1. Invisible hit areas - one for the Day side, one for the Night side

2. Listeners that detect click events on each hit area

Each Listener updates the isNight input:

• Clicking the Night area sets isNight = true

• Clicking the Day area sets isNight = false

Even though the hit areas are hidden in the final design, they remain fully interactive. This is a common and powerful pattern in Rive - separating what the user sees from what the user can interact with.

Step 6: Connect Visual Feedback

Interaction should always have clear visual feedback. The user clicks, and the entire environment should respond.

To support this, we add a Night Overlay layer that darkens the background when Night mode is active:

• Hidden in Day mode (opacity 0%)

• Visible in Night mode (opacity 100%)

The overlay's opacity is controlled by the same states as the toggle itself. Everything stays in sync because it's all driven by the same State Machine.

This is a pattern you'll use constantly in Rive - connecting multiple visual elements to a single source of truth.

Bonus: Data Binding and External Components

While this tutorial primarily uses Inputs, the same logic can also be connected using Data Binding.

As a bonus, the toggle is connected to an external Avatar component with an isNight property:

• In Day mode, the avatar is awake

• In Night mode, the avatar goes to sleep

This shows how a single toggle can control multiple systems at once - UI, animation, and external components - without changing the core logic.

In a real project, you'd typically choose one approach (Inputs or Data Binding), not both. But showing both here demonstrates what's possible when your State Machine logic is clean and well-structured.

Key Takeaways

From this single toggle button, we covered several important Rive principles:

1. Design first, logic second - get the visual right before adding behavior

2. Keep states clean - states are snapshots, not animations

3. Animate transitions, not states - the movement happens between states

4. Use Inputs to control logic - Boolean Inputs are your bridge to interactivity

5. Use Listeners for interaction - invisible hit areas are a powerful pattern

6. Separate visual feedback from interaction logic - connect everything to one source of truth

These patterns scale really well, whether you're building small UI elements or full interactive systems.