Components that change appearance based on user interactions are invaluable for creating high-fidelity prototypes.

You can create a component, add multiple variations (states) to it, and wire it to mimic real-world user behavior (without having to copy your components multiple times). 

Having components with states also makes it easier to manage your assets and to create interactive design systems. 

Common examples of components with states are buttons, checkboxes, and animated toggle buttons. These components need to change when users interact with them by tapping or hovering over them.

Once you have created a component, the Property Inspector has a new section that lists the component with a Default State. You can now add three types of states for your components — New State, Hover State, or Toggle State. Read on to know how to add a state.

New State

Use New State for scenarios where you want to show variations of a component such as a disabled or clicked version of a component.

Click the + button next to the main component's Default State in the Property Inspector, and select New State.

New State does not have any interactivity baked into the state. You have to wire the interaction in Prototype mode. For more information, see Add interactivity to components.

Hover State

Use Hover State if you want your component to change and display a different state when a user hovers over the component. 

In Design mode, click the + button next to the Main component's Default State in the Property Inspector, and select Hover State.

When using Hover State, you don't have to go to Prototype mode to wire the interaction. It's automatically done for you.

Toggle State

Use Toggle State when you want to create components with interactive toggle behavior such as toggle, radio button, checbox and so on. 

In Design mode, click the + button next to the Default State of the Main Component in the Property Inspector, and select Toggle State.

Once the toggle state is created, by default, XD will automatically bake in two bi-directional Tap interactions between the Default State and the Toggle State, making it fully interactive.

 You can add states only to a Main component. Component instances always inherit their states from the Main component.

Visualize components in different states

Add interactivity to components

You can use Tap, Hover, Keys & Gamepad, and Voice triggers for wiring interactions between component states in the Prototype mode. Wiring interactions between component states is similar to wiring interactions between artboards. The main difference is that when wiring interactions between component states, you choose a state as a destination instead of an artboard.

 States are listed above the artboards in the dropdown separated with a divider.

Edit component states

When you define an interaction on a Main component state, all instances of that component automatically inherit those interactions. This means if you wire a component to a specific artboard or state, all instances of that component also contain those interactions. 

When you have an instance selected on canvas and you want to edit existing states or add new states to the Main component, you can do so through one of the following options:

Component instances are linked with the main component. Changes to a main component cascade to the instances. For more information, see Manage components with a single source.

Rename and delete component states

Rename a component state: Double-click the component state name in the Property Inspector and type in a new name.

Delete a component state from a Main component: Right-click the component state and select Delete. When you delete a component state from the Main component, component instances that have that state active on canvas switch back to the Default State.

 You can only rename and delete states in the Main component. You cannot rename the Default State.

Publish and share component states

You can publish components and its associated states to a Creative Cloud Library from the Libraries panel and distribute them as part of a design system. For more information, see Work with Creative Cloud Libraries in XD.

Manage components with a single source

To simplify the management of component states, you can only add, rename and delete states from a Main component. Instances of that component automatically inherit any state changes made in the Main component. You can easily identify the Main component from the green filled diamond on canvas or from the Component section in the Property Inspector. Instances have a hollow green diamond. 

Inheritance of component states

Follow these principles while editing states across Main components and instances:

For more information on how component overrides work, see Work with components in XD.

Linked component states across documents

You can create and maintain a single source for all your reusable components along with their states and defined interactions. For example, if you have a button component with 5 defined states: Primary, Secondary, Hover, Tap, and Disabled states, when you copy and paste that component across documents, XD creates a linked component that maintains all the defined component states along with the state interactions. 

If you change your linked component properties (styling, interactions, and so on) in the source document, XD notifies documents with instances of that linked component with those updates. From there, you can preview the changes and choose to accept or ignore them. 

Linked Components only support interactions defined between states and not artboards.

Examples and sample files

Want to create a toggle switch that turns on and off when a user taps on it? 

Learn more

Watch this video to learn more about how you can build interactivity using components with states. 

Viewing time: 7 minutes.

What's next?

We've got you started with using components with states. Follow this community post to learn how to use this feature to create checkboxes. 

Have a question or an idea?