Design tools

Edit and switch component states in Lunacy

Learn how to create, manage, and switch component states in Lunacy for seamless interactive design. Quick steps, easy workflow, big impact.

Lunacy makes it easy to create, edit, and manage different states of your components. By default, every new component you create in Lunacy starts as the default (main) component. From there, you can add additional states—such as hover or pressed—with just a few clicks. Here’s how it works:

Creating a new component state

  1. Select a component instance.
    This could be the default (main) component or any of its instances on the canvas.
  2. Add a new state.
    In the Component section of the right panel, click the + button (or press Ctrl + Alt + P / ⌘ + ⌥ + P on macOS).
  3. Adjust and name your new state.
    Modify the component’s design (color, size, style—you name it) for the new state. Then, rename it so you can distinguish it from the default state.
  4. Click on any empty area on the canvas.
    Lunacy will create a new component near the main component, defining your newly added state.

Tip: Lunacy automatically arranges components into categories when you create new states (e.g., Button/Default and Button/Hover). You can edit these categories anytime in the Components tab.

Switching through component states

  1. Select a component instance on your canvas.
  2. Choose the new state from the dropdown in the right panel.

That’s it—your component instance will instantly switch to the new state!

Note on Overrides

Switching a component state doesn’t affect any existing overrides. For example, if you’ve customized text or colors on a button instance, those overrides remain intact even if you change its state from Default to Hover.

Try Lunacy for faster designs
DOWNLOAD
Adeline Knight

Content writer at Icons8. Vinyl record collector, amateur photographer

Recent Posts

What are monochromatic colors?

Monochromatic color = one hue, many values. Learn what it is, why it works, examples,…

3 weeks ago

Is the three-click rule just some three-word bullshit?

A blunt look at why “three clicks” isn’t a usability law, what actually drives task…

4 weeks ago

Ultimate guide to table of contents design (15 inspiring examples + pro tips)

Your cover may hook them, but the contents page keeps them. Learn how to design…

1 month ago

50+ tested AI image prompts for content creators who want to stand out

Because your feed shouldn't look like it was generated by the same three people. (more…)

1 month ago

Poster ideas & examples: creative poster design explained

From bold typography to organic abstracts, explore creative poster layouts with pro tips to adapt…

2 months ago

Using Garamond in 2025 without looking like you’re stuck in 1995

Everyone's out here saying "don't use Garamond" like it's 2015. Spoiler alert: it's not.

2 months ago

This website uses cookies.